diff --git a/dist/ionic.css b/dist/ionic.css
index a801e03ab1..129875b00f 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -344,9 +344,10 @@ table {
 
 html {
   -webkit-text-size-adjust: 100%;
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
   user-select: none; }
 
 body {
@@ -390,7 +391,7 @@ body {
   margin: 10px; }
 
 .rounded {
-  border-radius: 5px; }
+  border-radius: 4px; }
 
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
@@ -432,9 +433,10 @@ a {
   margin-top: 5px; }
 
 .bar {
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
   user-select: none;
   display: -webkit-box;
   display: box;
@@ -654,62 +656,54 @@ select,
 textarea {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
+.form-group {
+  border-top: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  background-color: white;
+  overflow: hidden; }
+
+.content-padded > .form-group,
+.form-group.inset {
+  border-left: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px; }
+
+.form-group .input-wrapper + .input-wrapper {
+  border-top: 1px solid #cccccc; }
+
+.form-group + .form-group {
+  margin-top: 10px; }
+
 .input-wrapper {
   display: block;
-  border-top: 1px solid #999999;
-  border-bottom: 1px solid #999999;
-  padding: 4px 7px 3px; }
+  padding: 6px 8px 5px;
+  overflow: hidden; }
   .input-wrapper input {
+    background-color: transparent;
     margin: 0;
-    -webkit-appearance: none; }
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0; }
   .input-wrapper .input-label {
     font-weight: bold;
     line-height: 34px; }
 
-.content-padded > .input-wrapper,
-.input-wrapper.inset {
-  border-left: 1px solid #999999;
-  border-right: 1px solid #999999;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px; }
-
-.input-wrapper.row-fluid {
-  width: auto; }
-
-.stacked-label {
-  padding: 0; }
-  .stacked-label input {
-    border: 1px solid #999999; }
-
-.stacked-label {
+.form-group.stacked-label,
+.form-group.stacked-label .input-wrapper {
+  background-color: transparent;
   border: 0; }
-  .stacked-label input {
-    border: 1px solid #999999 !important;
-    padding: 20px 10px !important;
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px; }
-  .stacked-label span {
-    font-weight: bold;
-    line-height: 20px; }
 
-.content > .input-wrapper.stacked-label input {
-  border-left: 0 !important;
-  border-right: 0 !important;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0; }
-
-.content-padded > .input-wrapper.stacked-label,
-.content > .input-wrapper.stacked-label.inset {
-  border: 0 !important; }
-
-.content > .input-wrapper.stacked-label.inset input {
-  border: 1px solid #999999 !important; }
-
-.input-wrapper + .input-wrapper {
-  border-top: 0 !important; }
+.form-group.stacked-label input {
+  border: 1px solid #cccccc;
+  background-color: white;
+  padding: 4px 8px 3px;
+  overflow: hidden;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px; }
 
 select,
 textarea,
@@ -759,7 +753,6 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  background-color: white;
   border: 0; }
   textarea:focus,
   input[type="text"]:focus,
@@ -799,13 +792,13 @@ input[type="checkbox"] {
 
 select,
 input[type="file"] {
-  height: 24px;
+  height: 34px;
   /* In IE7, the height of the select element cannot be changed by height, only font-size */
-  line-height: 24px; }
+  line-height: 34px; }
 
 select {
   width: 220px;
-  border: 1px solid #999999;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -820,21 +813,6 @@ input[type="checkbox"]:focus {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
-.uneditable-input,
-.uneditable-textarea {
-  color: #999999;
-  background-color: #fcfcfc;
-  border-color: #999999;
-  cursor: not-allowed; }
-
-.uneditable-input {
-  overflow: hidden;
-  white-space: nowrap; }
-
-.uneditable-textarea {
-  width: auto;
-  height: auto; }
-
 input:-moz-placeholder,
 textarea:-moz-placeholder {
   color: #999999; }
@@ -845,157 +823,6 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   color: #999999; }
 
-.radio,
-.checkbox {
-  min-height: 1.42857;
-  padding-left: 20px; }
-
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
-  float: left;
-  margin-left: -20px; }
-
-.controls > .radio:first-child,
-.controls > .checkbox:first-child {
-  padding-top: 5px; }
-
-.radio.inline,
-.checkbox.inline {
-  display: inline-block;
-  padding-top: 5px;
-  margin-bottom: 0;
-  vertical-align: middle; }
-
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
-  margin-left: 10px; }
-
-.input-mini {
-  width: 60px; }
-
-.input-small {
-  width: 90px; }
-
-.input-medium {
-  width: 150px; }
-
-.input-large {
-  width: 210px; }
-
-.input-xlarge {
-  width: 270px; }
-
-.input-xxlarge {
-  width: 530px; }
-
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"],
-.uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
-  float: none;
-  margin-left: 0; }
-
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
-  display: inline-block; }
-
-input,
-textarea,
-.uneditable-input {
-  margin-left: 0; }
-
-.controls-row [class*="span"] + [class*="span"] {
-  margin-left: 20px; }
-
-input.span1,
-textarea.span1,
-.uneditable-input.span1 {
-  width: 46px; }
-
-input.span2,
-textarea.span2,
-.uneditable-input.span2 {
-  width: 126px; }
-
-input.span3,
-textarea.span3,
-.uneditable-input.span3 {
-  width: 206px; }
-
-input.span4,
-textarea.span4,
-.uneditable-input.span4 {
-  width: 286px; }
-
-input.span5,
-textarea.span5,
-.uneditable-input.span5 {
-  width: 366px; }
-
-input.span6,
-textarea.span6,
-.uneditable-input.span6 {
-  width: 446px; }
-
-input.span7,
-textarea.span7,
-.uneditable-input.span7 {
-  width: 526px; }
-
-input.span8,
-textarea.span8,
-.uneditable-input.span8 {
-  width: 606px; }
-
-input.span9,
-textarea.span9,
-.uneditable-input.span9 {
-  width: 686px; }
-
-input.span10,
-textarea.span10,
-.uneditable-input.span10 {
-  width: 766px; }
-
-input.span11,
-textarea.span11,
-.uneditable-input.span11 {
-  width: 846px; }
-
-input.span12,
-textarea.span12,
-.uneditable-input.span12 {
-  width: 926px; }
-
-.controls-row {
-  *zoom: 1; }
-  .controls-row:before, .controls-row:after {
-    display: table;
-    content: "";
-    line-height: 0; }
-  .controls-row:after {
-    clear: both; }
-
-.controls-row [class*="span"],
-.row-fluid .controls-row [class*="span"] {
-  float: left; }
-
-.controls-row .checkbox[class*="span"],
-.controls-row .radio[class*="span"] {
-  padding-top: 5px; }
-
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -1003,7 +830,7 @@ input[readonly],
 select[readonly],
 textarea[readonly] {
   cursor: not-allowed;
-  background-color: whitesmoke; }
+  background-color: #eeeeee; }
 
 input[type="radio"][disabled],
 input[type="checkbox"][disabled],
@@ -1011,427 +838,22 @@ input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
   background-color: transparent; }
 
-.control-group.warning .control-label,
-.control-group.warning .help-block,
-.control-group.warning .help-inline {
-  color: #c09853; }
-.control-group.warning .checkbox,
-.control-group.warning .radio,
-.control-group.warning input,
-.control-group.warning select,
-.control-group.warning textarea {
-  color: #c09853; }
-.control-group.warning input,
-.control-group.warning select,
-.control-group.warning textarea {
-  border-color: #c09853;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
-  .control-group.warning input:focus,
-  .control-group.warning select:focus,
-  .control-group.warning textarea:focus {
-    border-color: #a47e3c;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; }
-.control-group.warning .input-prepend .add-on,
-.control-group.warning .input-append .add-on {
-  color: #c09853;
-  background-color: #fcf8e3;
-  border-color: #c09853; }
-
-.control-group.error .control-label,
-.control-group.error .help-block,
-.control-group.error .help-inline {
-  color: #b94a48; }
-.control-group.error .checkbox,
-.control-group.error .radio,
-.control-group.error input,
-.control-group.error select,
-.control-group.error textarea {
-  color: #b94a48; }
-.control-group.error input,
-.control-group.error select,
-.control-group.error textarea {
-  border-color: #b94a48;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
-  .control-group.error input:focus,
-  .control-group.error select:focus,
-  .control-group.error textarea:focus {
-    border-color: #953b39;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; }
-.control-group.error .input-prepend .add-on,
-.control-group.error .input-append .add-on {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #b94a48; }
-
-.control-group.success .control-label,
-.control-group.success .help-block,
-.control-group.success .help-inline {
-  color: #468847; }
-.control-group.success .checkbox,
-.control-group.success .radio,
-.control-group.success input,
-.control-group.success select,
-.control-group.success textarea {
-  color: #468847; }
-.control-group.success input,
-.control-group.success select,
-.control-group.success textarea {
-  border-color: #468847;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
-  .control-group.success input:focus,
-  .control-group.success select:focus,
-  .control-group.success textarea:focus {
-    border-color: #356635;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; }
-.control-group.success .input-prepend .add-on,
-.control-group.success .input-append .add-on {
-  color: #468847;
-  background-color: #dff0d8;
-  border-color: #468847; }
-
-.control-group.info .control-label,
-.control-group.info .help-block,
-.control-group.info .help-inline {
-  color: #3a87ad; }
-.control-group.info .checkbox,
-.control-group.info .radio,
-.control-group.info input,
-.control-group.info select,
-.control-group.info textarea {
-  color: #3a87ad; }
-.control-group.info input,
-.control-group.info select,
-.control-group.info textarea {
-  border-color: #3a87ad;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
-  .control-group.info input:focus,
-  .control-group.info select:focus,
-  .control-group.info textarea:focus {
-    border-color: #2d6987;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; }
-.control-group.info .input-prepend .add-on,
-.control-group.info .input-append .add-on {
-  color: #3a87ad;
-  background-color: #d9edf7;
-  border-color: #3a87ad; }
-
-input:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b; }
-  input:focus:invalid:focus,
-  textarea:focus:invalid:focus,
-  select:focus:invalid:focus {
-    border-color: #e9322d; }
-
-.form-actions {
-  padding: 0.42857 20px 1.42857;
-  margin-top: 1.42857;
-  margin-bottom: 1.42857;
-  background-color: whitesmoke;
-  border-top: 1px solid #e5e5e5;
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
   *zoom: 1; }
-  .form-actions:before, .form-actions:after {
+  .container:before, .container:after {
     display: table;
     content: "";
     line-height: 0; }
-  .form-actions:after {
+  .container:after {
     clear: both; }
 
-.help-block,
-.help-inline {
-  color: #595959; }
-
-.help-block {
-  display: block;
-  margin-bottom: 0.71429; }
-
-.help-inline {
-  display: inline-block;
-  *display: inline;
-  /* IE7 inline-block hack */
-  *zoom: 1;
-  vertical-align: middle;
-  padding-left: 5px; }
-
-.input-append,
-.input-prepend {
-  display: inline-block;
-  margin-bottom: 0.71429;
-  vertical-align: middle;
-  font-size: 0;
-  white-space: nowrap; }
-  .input-append input,
-  .input-append select,
-  .input-append .uneditable-input,
-  .input-append .dropdown-menu,
-  .input-append .popover,
-  .input-prepend input,
-  .input-prepend select,
-  .input-prepend .uneditable-input,
-  .input-prepend .dropdown-menu,
-  .input-prepend .popover {
-    font-size: 14px; }
-  .input-append input,
-  .input-append select,
-  .input-append .uneditable-input,
-  .input-prepend input,
-  .input-prepend select,
-  .input-prepend .uneditable-input {
-    position: relative;
-    margin-bottom: 0;
-    vertical-align: top; }
-    .input-append input:focus,
-    .input-append select:focus,
-    .input-append .uneditable-input:focus,
-    .input-prepend input:focus,
-    .input-prepend select:focus,
-    .input-prepend .uneditable-input:focus {
-      z-index: 2; }
-  .input-append .add-on,
-  .input-prepend .add-on {
-    display: inline-block;
-    width: auto;
-    height: 1.42857;
-    min-width: 16px;
-    padding: 4px 5px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 1.42857;
-    text-align: center;
-    text-shadow: 0 1px 0 white;
-    background-color: whitesmoke;
-    border: 1px solid #cccccc; }
-  .input-append .add-on,
-  .input-append .btn,
-  .input-append .btn-group > .dropdown-toggle,
-  .input-prepend .add-on,
-  .input-prepend .btn,
-  .input-prepend .btn-group > .dropdown-toggle {
-    vertical-align: top;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0; }
-  .input-append .active,
-  .input-prepend .active {
-    background-color: #a9dba9;
-    border-color: #46a546; }
-
-.input-prepend .add-on,
-.input-prepend .btn {
-  margin-right: -1px; }
-.input-prepend .add-on:first-child,
-.input-prepend .btn:first-child {
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius: 4px 0 0 4px;
-  border-radius: 4px 0 0 4px; }
-
-.input-append input,
-.input-append select,
-.input-append .uneditable-input {
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius: 4px 0 0 4px;
-  border-radius: 4px 0 0 4px; }
-  .input-append input + .btn-group .btn:last-child,
-  .input-append select + .btn-group .btn:last-child,
-  .input-append .uneditable-input + .btn-group .btn:last-child {
-    -webkit-border-radius: 0 4px 4px 0;
-    -moz-border-radius: 0 4px 4px 0;
-    border-radius: 0 4px 4px 0; }
-.input-append .add-on,
-.input-append .btn,
-.input-append .btn-group {
-  margin-left: -1px; }
-.input-append .add-on:last-child,
-.input-append .btn:last-child,
-.input-append .btn-group:last-child > .dropdown-toggle {
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
-  border-radius: 0 4px 4px 0; }
-
-.input-prepend.input-append input,
-.input-prepend.input-append select,
-.input-prepend.input-append .uneditable-input {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0; }
-  .input-prepend.input-append input + .btn-group .btn,
-  .input-prepend.input-append select + .btn-group .btn,
-  .input-prepend.input-append .uneditable-input + .btn-group .btn {
-    -webkit-border-radius: 0 4px 4px 0;
-    -moz-border-radius: 0 4px 4px 0;
-    border-radius: 0 4px 4px 0; }
-.input-prepend.input-append .add-on:first-child,
-.input-prepend.input-append .btn:first-child {
-  margin-right: -1px;
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius: 4px 0 0 4px;
-  border-radius: 4px 0 0 4px; }
-.input-prepend.input-append .add-on:last-child,
-.input-prepend.input-append .btn:last-child {
-  margin-left: -1px;
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
-  border-radius: 0 4px 4px 0; }
-.input-prepend.input-append .btn-group:first-child {
-  margin-left: 0; }
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9;
-  /* IE7-8 doesn't have border-radius, so don't indent the padding */
-  margin-bottom: 0;
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  border-radius: 15px; }
-
-/* Allow for input prepend/append in search forms */
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0; }
-
-.form-search .input-append .search-query {
-  -webkit-border-radius: 14px 0 0 14px;
-  -moz-border-radius: 14px 0 0 14px;
-  border-radius: 14px 0 0 14px; }
-
-.form-search .input-append .btn {
-  -webkit-border-radius: 0 14px 14px 0;
-  -moz-border-radius: 0 14px 14px 0;
-  border-radius: 0 14px 14px 0; }
-
-.form-search .input-prepend .search-query {
-  -webkit-border-radius: 0 14px 14px 0;
-  -moz-border-radius: 0 14px 14px 0;
-  border-radius: 0 14px 14px 0; }
-
-.form-search .input-prepend .btn {
-  -webkit-border-radius: 14px 0 0 14px;
-  -moz-border-radius: 14px 0 0 14px;
-  border-radius: 14px 0 0 14px; }
-
-.form-search input,
-.form-search textarea,
-.form-search select,
-.form-search .help-inline,
-.form-search .uneditable-input,
-.form-search .input-prepend,
-.form-search .input-append,
-.form-inline input,
-.form-inline textarea,
-.form-inline select,
-.form-inline .help-inline,
-.form-inline .uneditable-input,
-.form-inline .input-prepend,
-.form-inline .input-append,
-.form-horizontal input,
-.form-horizontal textarea,
-.form-horizontal select,
-.form-horizontal .help-inline,
-.form-horizontal .uneditable-input,
-.form-horizontal .input-prepend,
-.form-horizontal .input-append {
-  display: inline-block;
-  *display: inline;
-  /* IE7 inline-block hack */
-  *zoom: 1;
-  margin-bottom: 0;
-  vertical-align: middle; }
-.form-search .hide,
-.form-inline .hide,
-.form-horizontal .hide {
-  display: none; }
-
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block; }
-
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0; }
-
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  padding-left: 0;
-  margin-bottom: 0;
-  vertical-align: middle; }
-
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-  float: left;
-  margin-right: 3px;
-  margin-left: 0; }
-
-.control-group {
-  margin-bottom: 0.71429; }
-
-legend + .control-group {
-  margin-top: 1.42857;
-  -webkit-margin-top-collapse: separate; }
-
-.form-horizontal .control-group {
-  margin-bottom: 1.42857;
-  *zoom: 1; }
-  .form-horizontal .control-group:before, .form-horizontal .control-group:after {
-    display: table;
-    content: "";
-    line-height: 0; }
-  .form-horizontal .control-group:after {
-    clear: both; }
-.form-horizontal .control-label {
-  float: left;
-  width: 160px;
-  padding-top: 5px;
-  text-align: right; }
-.form-horizontal .controls {
-  *display: inline-block;
-  *padding-left: 20px;
-  margin-left: 180px; }
-  .form-horizontal .controls:first-child {
-    *padding-left: 180px; }
-.form-horizontal .help-block {
-  margin-bottom: 0; }
-.form-horizontal input + .help-block,
-.form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block,
-.form-horizontal .uneditable-input + .help-block,
-.form-horizontal .input-prepend + .help-block,
-.form-horizontal .input-append + .help-block {
-  margin-top: 0.71429; }
-.form-horizontal .form-actions {
-  padding-left: 180px; }
-
 .row {
-  margin-left: -20px;
+  margin-left: -15px;
+  margin-right: -15px;
   *zoom: 1; }
   .row:before, .row:after {
     display: table;
@@ -1440,229 +862,579 @@ legend + .control-group {
   .row:after {
     clear: both; }
 
-[class*="span"] {
-  float: left;
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
+  position: relative;
   min-height: 1px;
-  margin-left: 20px; }
+  padding-left: 15px;
+  padding-right: 15px; }
 
-.container,
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  width: 940px; }
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
+  float: left; }
 
-.span1 {
-  width: 60px; }
+.col-xs-1 {
+  width: 8.33333%; }
 
-.span2 {
-  width: 140px; }
+.col-xs-2 {
+  width: 16.66667%; }
 
-.span3 {
-  width: 220px; }
+.col-xs-3 {
+  width: 25%; }
 
-.span4 {
-  width: 300px; }
+.col-xs-4 {
+  width: 33.33333%; }
 
-.span5 {
-  width: 380px; }
+.col-xs-5 {
+  width: 41.66667%; }
 
-.span6 {
-  width: 460px; }
+.col-xs-6 {
+  width: 50%; }
 
-.span7 {
-  width: 540px; }
+.col-xs-7 {
+  width: 58.33333%; }
 
-.span8 {
-  width: 620px; }
+.col-xs-8 {
+  width: 66.66667%; }
 
-.span9 {
-  width: 700px; }
+.col-xs-9 {
+  width: 75%; }
 
-.span10 {
-  width: 780px; }
+.col-xs-10 {
+  width: 83.33333%; }
 
-.span11 {
-  width: 860px; }
+.col-xs-11 {
+  width: 91.66667%; }
 
-.span12 {
-  width: 940px; }
+.col-xs-12 {
+  width: 100%; }
 
-.offset1 {
-  margin-left: 100px; }
+@media (min-width: 768px) {
+  .container {
+    max-width: 750px; }
 
-.offset2 {
-  margin-left: 180px; }
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11 {
+    float: left; }
 
-.offset3 {
-  margin-left: 260px; }
+  .col-sm-1 {
+    width: 8.33333%; }
 
-.offset4 {
-  margin-left: 340px; }
+  .col-sm-2 {
+    width: 16.66667%; }
 
-.offset5 {
-  margin-left: 420px; }
+  .col-sm-3 {
+    width: 25%; }
 
-.offset6 {
-  margin-left: 500px; }
+  .col-sm-4 {
+    width: 33.33333%; }
 
-.offset7 {
-  margin-left: 580px; }
+  .col-sm-5 {
+    width: 41.66667%; }
 
-.offset8 {
-  margin-left: 660px; }
+  .col-sm-6 {
+    width: 50%; }
 
-.offset9 {
-  margin-left: 740px; }
+  .col-sm-7 {
+    width: 58.33333%; }
 
-.offset10 {
-  margin-left: 820px; }
+  .col-sm-8 {
+    width: 66.66667%; }
 
-.offset11 {
-  margin-left: 900px; }
+  .col-sm-9 {
+    width: 75%; }
 
-.offset12 {
-  margin-left: 980px; }
+  .col-sm-10 {
+    width: 83.33333%; }
 
-.row-fluid {
-  width: 100%;
-  *zoom: 1; }
-  .row-fluid:before, .row-fluid:after {
-    display: table;
-    content: "";
-    line-height: 0; }
-  .row-fluid:after {
-    clear: both; }
-  .row-fluid [class*="span"] {
-    display: block;
-    width: 100%;
-    min-height: 24px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    float: left;
-    margin-left: 2.12766%;
-    *margin-left: 2.07447%; }
-  .row-fluid [class*="span"]:first-child {
+  .col-sm-11 {
+    width: 91.66667%; }
+
+  .col-sm-12 {
+    width: 100%; }
+
+  .col-sm-push-1 {
+    left: 8.33333%; }
+
+  .col-sm-push-2 {
+    left: 16.66667%; }
+
+  .col-sm-push-3 {
+    left: 25%; }
+
+  .col-sm-push-4 {
+    left: 33.33333%; }
+
+  .col-sm-push-5 {
+    left: 41.66667%; }
+
+  .col-sm-push-6 {
+    left: 50%; }
+
+  .col-sm-push-7 {
+    left: 58.33333%; }
+
+  .col-sm-push-8 {
+    left: 66.66667%; }
+
+  .col-sm-push-9 {
+    left: 75%; }
+
+  .col-sm-push-10 {
+    left: 83.33333%; }
+
+  .col-sm-push-11 {
+    left: 91.66667%; }
+
+  .col-sm-pull-1 {
+    right: 8.33333%; }
+
+  .col-sm-pull-2 {
+    right: 16.66667%; }
+
+  .col-sm-pull-3 {
+    right: 25%; }
+
+  .col-sm-pull-4 {
+    right: 33.33333%; }
+
+  .col-sm-pull-5 {
+    right: 41.66667%; }
+
+  .col-sm-pull-6 {
+    right: 50%; }
+
+  .col-sm-pull-7 {
+    right: 58.33333%; }
+
+  .col-sm-pull-8 {
+    right: 66.66667%; }
+
+  .col-sm-pull-9 {
+    right: 75%; }
+
+  .col-sm-pull-10 {
+    right: 83.33333%; }
+
+  .col-sm-pull-11 {
+    right: 91.66667%; }
+
+  .col-sm-offset-1 {
+    margin-left: 8.33333%; }
+
+  .col-sm-offset-2 {
+    margin-left: 16.66667%; }
+
+  .col-sm-offset-3 {
+    margin-left: 25%; }
+
+  .col-sm-offset-4 {
+    margin-left: 33.33333%; }
+
+  .col-sm-offset-5 {
+    margin-left: 41.66667%; }
+
+  .col-sm-offset-6 {
+    margin-left: 50%; }
+
+  .col-sm-offset-7 {
+    margin-left: 58.33333%; }
+
+  .col-sm-offset-8 {
+    margin-left: 66.66667%; }
+
+  .col-sm-offset-9 {
+    margin-left: 75%; }
+
+  .col-sm-offset-10 {
+    margin-left: 83.33333%; }
+
+  .col-sm-offset-11 {
+    margin-left: 91.66667%; } }
+@media (min-width: 992px) {
+  .container {
+    max-width: 970px; }
+
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11 {
+    float: left; }
+
+  .col-md-1 {
+    width: 8.33333%; }
+
+  .col-md-2 {
+    width: 16.66667%; }
+
+  .col-md-3 {
+    width: 25%; }
+
+  .col-md-4 {
+    width: 33.33333%; }
+
+  .col-md-5 {
+    width: 41.66667%; }
+
+  .col-md-6 {
+    width: 50%; }
+
+  .col-md-7 {
+    width: 58.33333%; }
+
+  .col-md-8 {
+    width: 66.66667%; }
+
+  .col-md-9 {
+    width: 75%; }
+
+  .col-md-10 {
+    width: 83.33333%; }
+
+  .col-md-11 {
+    width: 91.66667%; }
+
+  .col-md-12 {
+    width: 100%; }
+
+  .col-md-push-0 {
+    left: auto; }
+
+  .col-md-push-1 {
+    left: 8.33333%; }
+
+  .col-md-push-2 {
+    left: 16.66667%; }
+
+  .col-md-push-3 {
+    left: 25%; }
+
+  .col-md-push-4 {
+    left: 33.33333%; }
+
+  .col-md-push-5 {
+    left: 41.66667%; }
+
+  .col-md-push-6 {
+    left: 50%; }
+
+  .col-md-push-7 {
+    left: 58.33333%; }
+
+  .col-md-push-8 {
+    left: 66.66667%; }
+
+  .col-md-push-9 {
+    left: 75%; }
+
+  .col-md-push-10 {
+    left: 83.33333%; }
+
+  .col-md-push-11 {
+    left: 91.66667%; }
+
+  .col-md-pull-0 {
+    right: auto; }
+
+  .col-md-pull-1 {
+    right: 8.33333%; }
+
+  .col-md-pull-2 {
+    right: 16.66667%; }
+
+  .col-md-pull-3 {
+    right: 25%; }
+
+  .col-md-pull-4 {
+    right: 33.33333%; }
+
+  .col-md-pull-5 {
+    right: 41.66667%; }
+
+  .col-md-pull-6 {
+    right: 50%; }
+
+  .col-md-pull-7 {
+    right: 58.33333%; }
+
+  .col-md-pull-8 {
+    right: 66.66667%; }
+
+  .col-md-pull-9 {
+    right: 75%; }
+
+  .col-md-pull-10 {
+    right: 83.33333%; }
+
+  .col-md-pull-11 {
+    right: 91.66667%; }
+
+  .col-md-offset-0 {
     margin-left: 0; }
-  .row-fluid .controls-row [class*="span"] + [class*="span"] {
-    margin-left: 2.12766%; }
-  .row-fluid .span1 {
-    width: 6.38298%;
-    *width: 6.32979%; }
-  .row-fluid .span2 {
-    width: 14.89362%;
-    *width: 14.84043%; }
-  .row-fluid .span3 {
-    width: 23.40426%;
-    *width: 23.35106%; }
-  .row-fluid .span4 {
-    width: 31.91489%;
-    *width: 31.8617%; }
-  .row-fluid .span5 {
-    width: 40.42553%;
-    *width: 40.37234%; }
-  .row-fluid .span6 {
-    width: 48.93617%;
-    *width: 48.88298%; }
-  .row-fluid .span7 {
-    width: 57.44681%;
-    *width: 57.39362%; }
-  .row-fluid .span8 {
-    width: 65.95745%;
-    *width: 65.90426%; }
-  .row-fluid .span9 {
-    width: 74.46809%;
-    *width: 74.41489%; }
-  .row-fluid .span10 {
-    width: 82.97872%;
-    *width: 82.92553%; }
-  .row-fluid .span11 {
-    width: 91.48936%;
-    *width: 91.43617%; }
-  .row-fluid .span12 {
-    width: 100%;
-    *width: 99.94681%; }
-  .row-fluid .offset1 {
-    margin-left: 10.6383%;
-    *margin-left: 10.53191%; }
-  .row-fluid .offset1:first-child {
-    margin-left: 8.51064%;
-    *margin-left: 8.40426%; }
-  .row-fluid .offset2 {
-    margin-left: 19.14894%;
-    *margin-left: 19.04255%; }
-  .row-fluid .offset2:first-child {
-    margin-left: 17.02128%;
-    *margin-left: 16.91489%; }
-  .row-fluid .offset3 {
-    margin-left: 27.65957%;
-    *margin-left: 27.55319%; }
-  .row-fluid .offset3:first-child {
-    margin-left: 25.53191%;
-    *margin-left: 25.42553%; }
-  .row-fluid .offset4 {
-    margin-left: 36.17021%;
-    *margin-left: 36.06383%; }
-  .row-fluid .offset4:first-child {
-    margin-left: 34.04255%;
-    *margin-left: 33.93617%; }
-  .row-fluid .offset5 {
-    margin-left: 44.68085%;
-    *margin-left: 44.57447%; }
-  .row-fluid .offset5:first-child {
-    margin-left: 42.55319%;
-    *margin-left: 42.44681%; }
-  .row-fluid .offset6 {
-    margin-left: 53.19149%;
-    *margin-left: 53.08511%; }
-  .row-fluid .offset6:first-child {
-    margin-left: 51.06383%;
-    *margin-left: 50.95745%; }
-  .row-fluid .offset7 {
-    margin-left: 61.70213%;
-    *margin-left: 61.59574%; }
-  .row-fluid .offset7:first-child {
-    margin-left: 59.57447%;
-    *margin-left: 59.46809%; }
-  .row-fluid .offset8 {
-    margin-left: 70.21277%;
-    *margin-left: 70.10638%; }
-  .row-fluid .offset8:first-child {
-    margin-left: 68.08511%;
-    *margin-left: 67.97872%; }
-  .row-fluid .offset9 {
-    margin-left: 78.7234%;
-    *margin-left: 78.61702%; }
-  .row-fluid .offset9:first-child {
-    margin-left: 76.59574%;
-    *margin-left: 76.48936%; }
-  .row-fluid .offset10 {
-    margin-left: 87.23404%;
-    *margin-left: 87.12766%; }
-  .row-fluid .offset10:first-child {
-    margin-left: 85.10638%;
-    *margin-left: 85.0%; }
-  .row-fluid .offset11 {
-    margin-left: 95.74468%;
-    *margin-left: 95.6383%; }
-  .row-fluid .offset11:first-child {
-    margin-left: 93.61702%;
-    *margin-left: 93.51064%; }
-  .row-fluid .offset12 {
-    margin-left: 104.25532%;
-    *margin-left: 104.14894%; }
-  .row-fluid .offset12:first-child {
-    margin-left: 102.12766%;
-    *margin-left: 102.02128%; }
 
-[class*="span"].hide,
-.row-fluid [class*="span"].hide {
-  display: none; }
+  .col-md-offset-1 {
+    margin-left: 8.33333%; }
 
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
-  float: right; }
+  .col-md-offset-2 {
+    margin-left: 16.66667%; }
 
+  .col-md-offset-3 {
+    margin-left: 25%; }
+
+  .col-md-offset-4 {
+    margin-left: 33.33333%; }
+
+  .col-md-offset-5 {
+    margin-left: 41.66667%; }
+
+  .col-md-offset-6 {
+    margin-left: 50%; }
+
+  .col-md-offset-7 {
+    margin-left: 58.33333%; }
+
+  .col-md-offset-8 {
+    margin-left: 66.66667%; }
+
+  .col-md-offset-9 {
+    margin-left: 75%; }
+
+  .col-md-offset-10 {
+    margin-left: 83.33333%; }
+
+  .col-md-offset-11 {
+    margin-left: 91.66667%; } }
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1170px; }
+
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11 {
+    float: left; }
+
+  .col-lg-1 {
+    width: 8.33333%; }
+
+  .col-lg-2 {
+    width: 16.66667%; }
+
+  .col-lg-3 {
+    width: 25%; }
+
+  .col-lg-4 {
+    width: 33.33333%; }
+
+  .col-lg-5 {
+    width: 41.66667%; }
+
+  .col-lg-6 {
+    width: 50%; }
+
+  .col-lg-7 {
+    width: 58.33333%; }
+
+  .col-lg-8 {
+    width: 66.66667%; }
+
+  .col-lg-9 {
+    width: 75%; }
+
+  .col-lg-10 {
+    width: 83.33333%; }
+
+  .col-lg-11 {
+    width: 91.66667%; }
+
+  .col-lg-12 {
+    width: 100%; }
+
+  .col-lg-push-0 {
+    left: auto; }
+
+  .col-lg-push-1 {
+    left: 8.33333%; }
+
+  .col-lg-push-2 {
+    left: 16.66667%; }
+
+  .col-lg-push-3 {
+    left: 25%; }
+
+  .col-lg-push-4 {
+    left: 33.33333%; }
+
+  .col-lg-push-5 {
+    left: 41.66667%; }
+
+  .col-lg-push-6 {
+    left: 50%; }
+
+  .col-lg-push-7 {
+    left: 58.33333%; }
+
+  .col-lg-push-8 {
+    left: 66.66667%; }
+
+  .col-lg-push-9 {
+    left: 75%; }
+
+  .col-lg-push-10 {
+    left: 83.33333%; }
+
+  .col-lg-push-11 {
+    left: 91.66667%; }
+
+  .col-lg-pull-0 {
+    right: auto; }
+
+  .col-lg-pull-1 {
+    right: 8.33333%; }
+
+  .col-lg-pull-2 {
+    right: 16.66667%; }
+
+  .col-lg-pull-3 {
+    right: 25%; }
+
+  .col-lg-pull-4 {
+    right: 33.33333%; }
+
+  .col-lg-pull-5 {
+    right: 41.66667%; }
+
+  .col-lg-pull-6 {
+    right: 50%; }
+
+  .col-lg-pull-7 {
+    right: 58.33333%; }
+
+  .col-lg-pull-8 {
+    right: 66.66667%; }
+
+  .col-lg-pull-9 {
+    right: 75%; }
+
+  .col-lg-pull-10 {
+    right: 83.33333%; }
+
+  .col-lg-pull-11 {
+    right: 91.66667%; }
+
+  .col-lg-offset-0 {
+    margin-left: 0; }
+
+  .col-lg-offset-1 {
+    margin-left: 8.33333%; }
+
+  .col-lg-offset-2 {
+    margin-left: 16.66667%; }
+
+  .col-lg-offset-3 {
+    margin-left: 25%; }
+
+  .col-lg-offset-4 {
+    margin-left: 33.33333%; }
+
+  .col-lg-offset-5 {
+    margin-left: 41.66667%; }
+
+  .col-lg-offset-6 {
+    margin-left: 50%; }
+
+  .col-lg-offset-7 {
+    margin-left: 58.33333%; }
+
+  .col-lg-offset-8 {
+    margin-left: 66.66667%; }
+
+  .col-lg-offset-9 {
+    margin-left: 75%; }
+
+  .col-lg-offset-10 {
+    margin-left: 83.33333%; }
+
+  .col-lg-offset-11 {
+    margin-left: 91.66667%; } }
 .list {
   margin-bottom: 20px;
   padding-left: 0; }
@@ -1860,39 +1632,39 @@ main {
   .bar.bar-primary {
     background-color: #6999e9;
     border-color: #5981c5;
-    color: white; }
+    color: #999999; }
     .bar.bar-primary .tab-item a {
-      color: white; }
+      color: #999999; }
   .bar.bar-info {
     background-color: #60d2e6;
     border-color: #51b3c4;
-    color: white; }
+    color: #999999; }
     .bar.bar-info .tab-item a {
-      color: white; }
+      color: #999999; }
   .bar.bar-success {
     background-color: #89c163;
     border-color: #71a052;
-    color: white; }
+    color: #999999; }
     .bar.bar-success .tab-item a {
-      color: white; }
+      color: #999999; }
   .bar.bar-warning {
     background-color: #f0b840;
     border-color: #cf9a29;
-    color: white; }
+    color: #999999; }
     .bar.bar-warning .tab-item a {
-      color: white; }
+      color: #999999; }
   .bar.bar-danger {
     background-color: #de5645;
     border-color: #bc4435;
-    color: white; }
+    color: #999999; }
     .bar.bar-danger .tab-item a {
-      color: white; }
+      color: #999999; }
   .bar.bar-dark {
     background-color: #444444;
     border-color: #111111;
-    color: white; }
+    color: #999999; }
     .bar.bar-dark .tab-item a {
-      color: white; }
+      color: #999999; }
 
 .bar-default .button {
   color: #333333;
@@ -1919,11 +1691,11 @@ main {
     border-color: #b3b3b3; }
 
 .bar-primary .button {
-  color: white;
+  color: #999999;
   background-color: #6999e9;
   border-color: #5981c5; }
   .bar-primary .button:hover {
-    color: white;
+    color: #999999;
     text-decoration: none; }
   .bar-primary .button.active, .bar-primary .button:active {
     background-color: #4581e4;
@@ -1931,11 +1703,11 @@ main {
     border-color: #3d67ae; }
 
 .bar-info .button {
-  color: white;
+  color: #999999;
   background-color: #60d2e6;
   border-color: #51b3c4; }
   .bar-info .button:hover {
-    color: white;
+    color: #999999;
     text-decoration: none; }
   .bar-info .button.active, .bar-info .button:active {
     background-color: #3dc8e0;
@@ -1943,11 +1715,11 @@ main {
     border-color: #3998a9; }
 
 .bar-success .button {
-  color: white;
+  color: #999999;
   background-color: #89c163;
   border-color: #71a052; }
   .bar-success .button:hover {
-    color: white;
+    color: #999999;
     text-decoration: none; }
   .bar-success .button.active, .bar-success .button:active {
     background-color: #73b447;
@@ -1955,11 +1727,11 @@ main {
     border-color: #597e41; }
 
 .bar-warning .button {
-  color: white;
+  color: #999999;
   background-color: #f0b840;
   border-color: #cf9a29; }
   .bar-warning .button:hover {
-    color: white;
+    color: #999999;
     text-decoration: none; }
   .bar-warning .button.active, .bar-warning .button:active {
     background-color: #edaa1a;
@@ -1967,11 +1739,11 @@ main {
     border-color: #a47a21; }
 
 .bar-danger .button {
-  color: white;
+  color: #999999;
   background-color: #de5645;
   border-color: #bc4435; }
   .bar-danger .button:hover {
-    color: white;
+    color: #999999;
     text-decoration: none; }
   .bar-danger .button.active, .bar-danger .button:active {
     background-color: #d43926;
@@ -1979,11 +1751,11 @@ main {
     border-color: #94362a; }
 
 .bar-dark .button {
-  color: white;
+  color: #999999;
   background-color: #444444;
   border-color: #111111; }
   .bar-dark .button:hover {
-    color: white;
+    color: #999999;
     text-decoration: none; }
   .bar-dark .button.active, .bar-dark .button:active {
     background-color: #303030;
@@ -2024,71 +1796,75 @@ main {
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #b3b3b3; }
   .button.button-primary {
-    color: white;
+    color: #999999;
     background-color: #6999e9;
     border-color: #5981c5; }
     .button.button-primary:hover {
-      color: white;
+      color: #999999;
       text-decoration: none; }
     .button.button-primary.active, .button.button-primary:active {
       background-color: #4581e4;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #3d67ae; }
   .button.button-info {
-    color: white;
+    color: #999999;
     background-color: #60d2e6;
     border-color: #51b3c4; }
     .button.button-info:hover {
-      color: white;
+      color: #999999;
       text-decoration: none; }
     .button.button-info.active, .button.button-info:active {
       background-color: #3dc8e0;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #3998a9; }
   .button.button-success {
-    color: white;
+    color: #999999;
     background-color: #89c163;
     border-color: #71a052; }
     .button.button-success:hover {
-      color: white;
+      color: #999999;
       text-decoration: none; }
     .button.button-success.active, .button.button-success:active {
       background-color: #73b447;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #597e41; }
   .button.button-warning {
-    color: white;
+    color: #999999;
     background-color: #f0b840;
     border-color: #cf9a29; }
     .button.button-warning:hover {
-      color: white;
+      color: #999999;
       text-decoration: none; }
     .button.button-warning.active, .button.button-warning:active {
       background-color: #edaa1a;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #a47a21; }
   .button.button-danger {
-    color: white;
+    color: #999999;
     background-color: #de5645;
     border-color: #bc4435; }
     .button.button-danger:hover {
-      color: white;
+      color: #999999;
       text-decoration: none; }
     .button.button-danger.active, .button.button-danger:active {
       background-color: #d43926;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #94362a; }
   .button.button-dark {
-    color: white;
+    color: #999999;
     background-color: #444444;
     border-color: #111111; }
     .button.button-dark:hover {
-      color: white;
+      color: #999999;
       text-decoration: none; }
     .button.button-dark.active, .button.button-dark:active {
       background-color: #303030;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: black; }
+  .button.button-clear {
+    background: none;
+    border: none;
+    padding: 10px 0px; }
 
 a.button {
   text-decoration: none; }
diff --git a/example/input-text.html b/example/input-text.html
index 0ca1418707..7584816f98 100644
--- a/example/input-text.html
+++ b/example/input-text.html
@@ -24,32 +24,58 @@
       <div class="content has-header has-footer">
 
         <h3>Default Text Input, Not Inset, No Content Padding</h3>
-        <label class="input-wrapper">
-          <input type="text" placeholder="First Name">
-        </label>
-        <label class="input-wrapper">
-          <input type="text" placeholder="Last Name">
-        </label>
-        <label class="input-wrapper">
-          <input type="email" placeholder="Email">
-        </label>
+        <div class="form-group">
+          <label class="input-wrapper">
+            <input type="text" placeholder="First Name">
+          </label>
+          <label class="input-wrapper">
+            <input type="text" placeholder="Last Name">
+          </label>
+          <label class="input-wrapper">
+            <input type="email" placeholder="Email">
+          </label>
+        </div>
 
         <h3>Default Text Input, Is Inset, No Content Padding</h3>
-        <label class="input-wrapper inset">
-          <input type="email" placeholder="Email">
-        </label>
+        <div class="form-group inset">
+          <label class="input-wrapper">
+            <input type="text" placeholder="First Name">
+          </label>
+          <label class="input-wrapper">
+            <input type="text" placeholder="Last Name">
+          </label>
+          <label class="input-wrapper">
+            <input type="email" placeholder="Email">
+          </label>
+        </div>
 
         <div class="content-padded">
 
           <h3>Default Text Input, Not Inset, With Content Padding</h3>
-          <label class="input-wrapper">
-            <input type="email" placeholder="Email">
-          </label>
+          <div class="form-group">
+            <label class="input-wrapper">
+              <input type="text" placeholder="Username">
+            </label>
+            <label class="input-wrapper">
+              <input type="email" placeholder="Email">
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label class="input-wrapper">
+              <input type="text" placeholder="Filter by name">
+            </label>
+          </div>
 
           <h3>Default Text Input, Is Inset, With Content Padding</h3>
-          <label class="input-wrapper inset">
-            <input type="email" placeholder="Email">
-          </label>
+          <div class="form-group inset">
+            <label class="input-wrapper">
+              <input type="email" placeholder="Email">
+            </label>
+            <label class="input-wrapper">
+              <input type="text" placeholder="Name">
+            </label>
+          </div>
 
         </div>
 
@@ -57,38 +83,56 @@
 
 
         <h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3>
-        <label class="input-wrapper row-fluid">
-          <span class="input-label span3">Email</span>
-          <input class="span9" type="text" placeholder="your@email.com">
-        </label>
-        <label class="input-wrapper row-fluid">
-          <span class="input-label span3">Email</span>
-          <input class="span9" type="text" placeholder="your@email.com">
-        </label>
-        <label class="input-wrapper row-fluid">
-          <span class="input-label span3">Email</span>
-          <input class="span9" type="text" placeholder="your@email.com">
-        </label>
+        <div class="form-group">
+          <label class="input-wrapper row-fluid">
+            <span class="input-label span4">Username</span>
+            <input class="span8" type="text" placeholder="@drifty">
+          </label>
+          <label class="input-wrapper row-fluid">
+            <span class="input-label span4">Email</span>
+            <input class="span8" type="email" placeholder="your@email.com">
+          </label>
+          <label class="input-wrapper row-fluid">
+            <span class="input-label span4">First Name</span>
+            <input class="span8" type="text" placeholder="Sir Derp">
+          </label>
+        </div>
 
         <h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
-        <label class="input-wrapper row-fluid inset">
-          <span class="input-label span3">Email</span>
-          <input class="span9" type="text" placeholder="your@email.com">
-        </label>
-
-        <div class="content-padded">
-
-          <h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
+        <div class="form-group inset">
           <label class="input-wrapper row-fluid">
             <span class="input-label span3">Email</span>
             <input class="span9" type="text" placeholder="your@email.com">
           </label>
+        </div>
+
+        <div class="content-padded">
+
+          <h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
+          <div class="form-group">
+            <label class="input-wrapper row-fluid">
+              <span class="input-label span3">First Name</span>
+              <input class="span9" type="text" placeholder="John">
+            </label>
+            <label class="input-wrapper row-fluid">
+              <span class="input-label span3">Last Name</span>
+              <input class="span9" type="text" placeholder="Suhr">
+            </label>
+          </div>
 
           <h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
-          <label class="input-wrapper row-fluid inset">
-            <span class="input-label span3">Email</span>
-            <input class="span9" type="text" placeholder="your@email.com">
-          </label>
+          <div class="form-group inset">
+            <label class="input-wrapper row-fluid">
+              <span class="input-label span3">Email</span>
+              <input class="span9" type="text" placeholder="your@email.com">
+            </label>
+          </div>
+          <div class="form-group inset">
+            <label class="input-wrapper row-fluid">
+              <span class="input-label span3">Filter By Name</span>
+              <input class="span9" type="text" placeholder="Enter keywords">
+            </label>
+          </div>
 
         </div>
 
@@ -96,30 +140,52 @@
 
 
         <h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
-        <label class="input-wrapper stacked-label">
-          <span>Email</span>
-          <input type="text" placeholder="your@email.com">
-        </label>
+        <div class="form-group stacked-label">
+          <label class="input-wrapper">
+            <span class="input-label">First Name</span>
+            <input type="text" placeholder="Drifty">
+          </label>
+          <label class="input-wrapper">
+            <span class="input-label">Last Name</span>
+            <input type="text" placeholder="Co">
+          </label>
+          <label class="input-wrapper">
+            <span class="input-label">Email</span>
+            <input type="text" placeholder="your@email.com">
+          </label>
+        </div>
+        <div class="form-group stacked-label">
+          <label class="input-wrapper">
+            <span class="input-label">Filter By Name</span>
+            <input type="text" placeholder="">
+          </label>
+        </div>
 
         <h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
-        <label class="input-wrapper stacked-label inset">
-          <span>Email</span>
-          <input type="text" placeholder="your@email.com">
-        </label>
+        <div class="form-group stacked-label inset">
+          <label class="input-wrapper">
+            <span class="input-label">Email</span>
+            <input type="text" placeholder="your@email.com">
+          </label>
+        </div>
 
         <div class="content-padded">
 
           <h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
-          <label class="input-wrapper stacked-label">
-            <span>Email</span>
-            <input type="text" placeholder="your@email.com">
-          </label>
+          <div class="form-group stacked-label">
+            <label class="input-wrapper">
+              <span class="input-label">Email</span>
+              <input type="text" placeholder="your@email.com">
+            </label>
+          </div>
 
           <h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
-          <label class="input-wrapper stacked-label inset">
-            <span>Email</span>
-            <input type="text" placeholder="your@email.com">
-          </label>
+          <div class="form-group stacked-label inset">
+            <label class="input-wrapper">
+              <span class="input-label">Email</span>
+              <input type="text" placeholder="your@email.com">
+            </label>
+          </div>
 
         </div>
 
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 6388216c44..284a6e73b6 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -68,30 +68,6 @@
   margin-right: auto;
 }
 
-// IE7 inline-block
-// ----------------
-@mixin ie7-inline-block() {
-  *display: inline; /* IE7 inline-block hack */
-  *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-@mixin ie7-restore-left-whitespace() {
-  *margin-left: .3em;
-
-  &:first-child {
-    *margin-left: 0;
-  }
-}
-
-@mixin ie7-restore-right-whitespace() {
-  *margin-right: .3em;
-}
 
 // Sizing shortcuts
 // -------------------------
@@ -105,7 +81,7 @@
 
 // Placeholder text
 // -------------------------
-@mixin placeholder($color: $placeholderText) {
+@mixin placeholder($color: $input-color-placeholder) {
   &:-moz-placeholder {
     color: $color;
   }
@@ -126,29 +102,18 @@
   white-space: nowrap;
 }
 
-// CSS image replacement
-// -------------------------
-// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-@mixin hide-text {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-
 
 // FONTS
 // --------------------------------------------------
 
 @mixin font-family-serif() {
-  font-family: $serifFontFamily;
+  font-family: $serif-font-family;
 }
 @mixin font-family-sans-serif() {
-  font-family: $sansFontFamily;
+  font-family: $sans-font-family;
 }
 @mixin font-family-monospace() {
-  font-family: $monoFontFamily;
+  font-family: $mono-font-family;
 }
 @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
   font-size: $size;
@@ -169,53 +134,6 @@
 }
 
 
-// FORMS
-// --------------------------------------------------
-
-// Block level inputs
-@mixin input-block-level {
-  display: block;
-  width: 100%;
-  min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
-}
-
-
-
-// Mixin for form field states
-@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
-  // Set the text color
-  .control-label,
-  .help-block,
-  .help-inline {
-    color: $textColor;
-  }
-  // Style inputs accordingly
-  .checkbox,
-  .radio,
-  input,
-  select,
-  textarea {
-    color: $textColor;
-  }
-  input,
-  select,
-  textarea {
-    border-color: $borderColor;
-    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
-    &:focus {
-      border-color: darken($borderColor, 10%);
-      @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
-    }
-  }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: $textColor;
-    background-color: $backgroundColor;
-    border-color: $textColor;
-  }
-}
 
 
 
@@ -410,12 +328,6 @@
           hyphens: $mode;
 }
 
-// Opacity
-@mixin opacity($opacity) {
-  opacity: $opacity / 100;
-  filter: alpha(opacity=$opacity);
-}
-
 @mixin box-orient($orientation) {
   box-orient: $orientation;
   -webkit-box-orient: $orientation;
@@ -428,156 +340,6 @@
   -moz-box-flex: $flex;
 }
 
-
-
-// BACKGROUNDS
-// --------------------------------------------------
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-@mixin translucent-background($color: $white, $alpha: 1) {
-  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-}
-
-@mixin translucent-border($color: $white, $alpha: 1) {
-  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-  @include background-clip(padding-box);
-}
-
-// Gradient Bar Colors for buttons and alerts
-@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  color: $textColor;
-  text-shadow: $textShadow;
-  @include gradient-vertical($primaryColor, $secondaryColor);
-  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
-  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
-}
-
-// Gradients
-@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
-  background-color: $endColor;
-  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
-  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
-}
-@mixin gradient-vertical($startColor: #555, $endColor: #333) {
-  background-color: mix($startColor, $endColor, 60%);
-  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
-  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
-}
-@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
-  background-color: $endColor;
-  background-repeat: repeat-x;
-  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
-  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
-  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
-}
-@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
-  background-color: mix($midColor, $endColor, 80%);
-  background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
-  background-image: -webkit-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
-  background-image: -moz-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
-  background-image: -o-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
-  background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
-  background-repeat: no-repeat;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
-}
-
-@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
-  background-color: mix($midColor, $endColor, 80%);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
-  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
-  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-repeat: no-repeat;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
-}
-@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
-  background-color: $outerColor;
-  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
-  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
-  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
-  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
-  background-repeat: no-repeat;
-}
-@mixin gradient-striped($color: #555, $angle: 45deg) {
-  background-color: $color;
-  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
-  background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-  background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-}
-
-// Reset filters for IE
-@mixin reset-filter() {
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// Horizontal dividers
-// -------------------------
-// Dividers (basically an hr) within dropdowns and nav lists
-@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
-  // IE7 needs a set width since we gave a height. Restricting just
-  // to IE7 to keep the 1px left/right space in other browsers.
-  // It is unclear where IE is getting the extra space that we need
-  // to negative-margin away, but so it goes.
-  *width: 100%;
-  height: 1px;
-  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
-  *margin: -5px 0 5px;
-  overflow: hidden;
-  background-color: $top;
-  border-bottom: 1px solid $bottom;
-}
-
-// Button backgrounds
-// ------------------
-@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  @include gradientBar($startColor, $endColor, $textColor, $textShadow);
-  *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
-  @include reset-filter();
-
-  // in these cases the gradient won't cover the background, so we override
-  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
-    color: $textColor;
-    background-color: $endColor;
-    *background-color: darken($endColor, 5%);
-  }
-
-  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
-  &:active,
-  &.active {
-    background-color: darken($endColor, 10%) \9;
-  }
-}
-
-// Navbar vertical align
-// -------------------------
-// Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
-@mixin navbarVerticalAlign($elementHeight) {
-  margin-top: ($navbarHeight - $elementHeight) / 2;
-}
-
-
-
 // Grid System
 // -----------
 
@@ -585,175 +347,125 @@
 @mixin container-fixed() {
   margin-right: auto;
   margin-left: auto;
+  padding-left:  ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width / 2);
   @include clearfix();
 }
 
-// Table columns
-@mixin tableColumns($columnSpan: 1) {
-  float: none; // undo default grid column styles
-  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
-  margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-@mixin makeRow() {
-  margin-left: $gridGutterWidth * -1;
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+  margin-left:  ($gutter / -2);
+  margin-right: ($gutter / -2);
   @include clearfix();
 }
-@mixin makeColumn($columns: 1, $offset: 0) {
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
   float: left;
-  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+  width: percentage(($columns / $grid-columns));
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
 }
 
-// The Grid
-@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
-  .row {
-    margin-left: $gridGutterWidth * -1;
-    @include clearfix();
-  }
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
 
-  [class*="span"] {
+  // Calculate width based on number of columns available
+  @media (min-width: $screen-sm) {
     float: left;
-    min-height: 1px; // prevent collapsing columns
-    margin-left: $gridGutterWidth;
-  }
-
-  // Set the container width, and override it for fixed navbars in media queries
-  .container,
-  .navbar-static-top .container,
-  .navbar-fixed-top .container,
-  .navbar-fixed-bottom .container {
-    @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
-  }
-
-  // generate .spanX and .offsetX
-  @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-  @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth); }
+    width: percentage(($columns / $grid-columns));
   }
 }
 
-@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
+// Generate the small column offsets
+@mixin make-sm-column-offset($columns) {
+  @media (min-width: $screen-sm) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-push($columns) {
+  @media (min-width: $screen-sm) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-pull($columns) {
+  @media (min-width: $screen-sm) {
+    right: percentage(($columns / $grid-columns));
   }
 }
 
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
 
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
-  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
-}
-
-
-
-@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
-  .row-fluid {
-    width: 100%;
-    @include clearfix();
-    [class*="span"] {
-      @include input-block-level();
-      float: left;
-      margin-left: $fluidGridGutterWidth;
-      *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-    }
-    [class*="span"]:first-child {
-      margin-left: 0;
-    }
-
-    // Space grid-sized controls properly if multiple per line
-    .controls-row [class*="span"] + [class*="span"] {
-      margin-left: $fluidGridGutterWidth;
-    }
-
-    // generate .spanX and .offsetX
-    @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
-    @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
+  // Calculate width based on number of columns available
+  @media (min-width: $screen-md) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
   }
 }
 
-@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
+// Generate the large column offsets
+@mixin make-md-column-offset($columns) {
+  @media (min-width: $screen-md) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-push($columns) {
+  @media (min-width: $screen-md) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-pull($columns) {
+  @media (min-width: $screen-md) {
+    right: percentage(($columns / $grid-columns));
   }
 }
 
-@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .offset#{$i} { @include grid-fluid-offset($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
-    .offset#{$i}:first-child { @include grid-fluid-offset-first-child($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: $screen-lg) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
   }
 }
 
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
-  *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
-  *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
-  *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-
-
-@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
-  input,
-  textarea,
-  .uneditable-input {
-    margin-left: 0; // override margin-left from core grid system
-  }
-
-  // Space grid-sized controls properly if multiple per line
-  .controls-row [class*="span"] + [class*="span"] {
-    margin-left: $gridGutterWidth;
-  }
-
-  // generate .spanX
-  @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    input.span#{$i},
-    textarea.span#{$i},
-    .uneditable-input.span#{$i} {
-      @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth);
-    }
+// Generate the large column offsets
+@mixin make-lg-column-offset($columns) {
+  @media (min-width: $screen-lg) {
+    margin-left: percentage(($columns / $grid-columns));
   }
 }
-
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
-  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
-}
-
-@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
-  border-color: $border;
-  & > .panel-heading {
-    color: $heading-text-color;
-    background-color: $heading-bg-color;
-    border-color: $heading-border;
-    + .panel-collapse .panel-body {
-      border-top-color: $border;
-    }
-  }
-  & > .panel-footer {
-    + .panel-collapse .panel-body {
-      border-bottom-color: $border;
-    }
+@mixin make-lg-column-push($columns) {
+  @media (min-width: $screen-lg) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-pull($columns) {
+  @media (min-width: $screen-lg) {
+    right: percentage(($columns / $grid-columns));
   }
 }
-
diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss
index 4756d45361..c4e7ca3026 100644
--- a/scss/ionic/_structure-variables.scss
+++ b/scss/ionic/_structure-variables.scss
@@ -1,92 +1,133 @@
+// Components
+// -------------------------
+// Based on 14px font-size and 1.428 line-height (~20px to start)
+
+$padding-base-vertical:          6px !default;
+$padding-base-horizontal:        12px !default;
+
+$padding-large-vertical:         10px !default;
+$padding-large-horizontal:       16px !default;
+
+$padding-small-vertical:         5px !default;
+$padding-small-horizontal:       10px !default;
+
+$line-height-large:              1.33 !default;
+$line-height-small:              1.5 !default;
+
+$border-radius-base:             4px !default;
+$border-radius-large:            6px !default;
+$border-radius-small:            3px !default;
+
+$caret-width-base:               4px !default;
+$caret-width-large:              5px !default;
+
 
 // Typography
-// -------------------------------
-$baseFontSize:              14px !default;
-$fontSizeLarge:             ceil($baseFontSize * 1.25);
-$baseLineHeight:            1.428571429; // 20/14
-$baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
-$lineHeightComputed:        $baseLineHeightComputed;
-$baseBorderRadius:          2px !default;
+// -------------------------
+
+$font-family-sans-serif:    "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:         Georgia, "Times New Roman", Times, serif !default;
+$font-family-monospace:     Monaco, Menlo, Consolas, "Courier New", monospace !default;
+$font-family-base:          $font-family-sans-serif !default;
+
+$font-size-base:            14px !default;
+$font-size-large:           ceil($font-size-base * 1.25) !default; // ~18px
+$font-size-small:           ceil($font-size-base * 0.85) !default; // ~12px
+
+$line-height-base:          1.428571429 !default; // 20/14
+$line-height-computed:      floor($font-size-base * $line-height-base) !default; // ~20px
+
+$headings-font-family:      $font-family-base !default;
+$headings-font-weight:      500 !default;
+$headings-line-height:      1.1 !default;
 
 
 // Content stuff
 // -------------------------------
-$contentPadding:           10px;
-$insetMargin:              10px;
-$roundedRadius:            5px; 
+$content-padding:           10px;
+$inset-margin:              10px;
+$border-radius-base:        4px !default;
+$border-radius-large:       6px !default;
+$border-radius-small:       3px !default;
 
 
 // Bar stuff
 // -------------------------------
-$barHeight:                    44px !default;
-$barLineHeight:                44px !default;
-$barButtonLineHeight: 		   23px !default;
-$barButtonBarLineHeight: 	   18px !default;
-$barTitleFontSize:             $fontSizeLarge;
-$barTitleLineHeightComputed:   26px;//$barHeight - 2;
-$barPaddingPortrait:           5px;
-$barPaddingLandscape:          5px;
+$bar-height:                     44px !default;
+$bar-button-line-height: 		     23px !default;
+$bar-button-bar-line-height: 	   18px !default;
+$bar-title-font-size:            $font-size-large;
+$bar-padding-portrait:           5px;
+$bar-padding-landscape:          5px;
 
 
 // Button bar stuff
 // -------------------------------
-$buttonBarButtonLineHeight:	   15px !default;
+$button-bar-button-line-height:	 15px !default;
 
 
 // Forms
 // -------------------------------
-$textInputBorderRadius:     2px;
-
-
-// Horizontal forms & lists
-// -------------------------------
-$horizontalComponentOffset:       180px !default;
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+$input-height-large:             (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
 
 
 // Lists
 // -------------------------------
-$listItemBorder: 1px solid #ddd;
+$list-item-border:         1px solid #ddd;
 
 
 // Menus
 // -------------------------------
-$menuWidth:              270px;
-$menuAnimationSpeed:     200ms;
-$menuBackgroundColor:    #eee;
-$menuInsetBorderColor:   #bbb;
+$menu-width:               270px;
+$menu-animation-speed:     200ms;
 
 
-// GRID
+// Media queries breakpoints
 // -------------------------------
 
+// Extra small screen / phone
+$screen-xs:                  480px !default;
+$screen-phone:               $screen-xs !default;
 
-// Default 940px grid
+// Small screen / tablet
+$screen-sm:                  768px !default;
+$screen-tablet:              $screen-sm !default;
+
+// Medium screen / desktop
+$screen-md:                  992px !default;
+$screen-desktop:             $screen-md !default;
+
+// Large screen / wide desktop
+$screen-lg:                  1200px !default;
+$screen-lg-desktop:          $screen-lg !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm - 1) !default;
+$screen-sm-max:              ($screen-md - 1) !default;
+$screen-md-max:              ($screen-lg - 1) !default;
+
+
+// Grid system
 // -------------------------------
-$gridColumns:             12 !default;
-$gridColumnWidth:         60px !default;
-$gridGutterWidth:         20px !default;
-$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
-
-// 1200px min
-$gridColumnWidth1200:     70px !default;
-$gridGutterWidth1200:     30px !default;
-$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
-
-// 768px-979px
-$gridColumnWidth768:      42px !default;
-$gridGutterWidth768:      20px !default;
-$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
+// Number of columns in the grid system
+$grid-columns:              12 !default;
+// Padding, to be divided by two and applied to the left and right of all columns
+$grid-gutter-width:         30px !default;
+// Point at which the navbar stops collapsing
+$grid-float-breakpoint:     $screen-tablet !default;
 
 
-// Fluid grid
+// Container sizes
 // -------------------------------
-$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth) !default;
-$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth) !default;
 
-// 1200px min
-$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
-$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
+// Small screen / tablet
+$container-tablet:            ((720px + $grid-gutter-width)) !default;
+
+// Medium screen / desktop
+$container-desktop:           ((940px + $grid-gutter-width)) !default;
+
+// Large screen / wide desktop
+$container-lg-desktop:        ((1140px + $grid-gutter-width)) !default;
 
-// 768px-979px
-$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768) !default;
-$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768) !default;
diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss
index 81b33e3f1f..9a064caa86 100644
--- a/scss/ionic/_theme-variables.scss
+++ b/scss/ionic/_theme-variables.scss
@@ -1,168 +1,174 @@
 
 // Brand Colors
 // -------------------------------
-$brandPrimary:         #428bca;
-$brandSuccess:         #5cb85c;
-$brandWarning:         #f0ad4e;
-$brandDanger:          #d9534f;
-$brandInfo:            #5bc0de;
+$brand-primary:         #428bca;
+$brand-success:         #5cb85c;
+$brand-warning:         #f0ad4e;
+$brand-danger:          #d9534f;
+$brand-info:            #5bc0de;
+
 
 // Global Gray Colors
 // -------------------------------
 $black:                 #000 !default;
-$grayDarker:            #222 !default;
-$grayDark:              #333 !default;
-$gray:                  #555 !default;
-$grayLight:             #999 !default;
-$grayLighter:           #f5f5f5 !default;
+$gray-darker:           lighten(#000, 13.5%) !default; // #222
+$gray-dark:             lighten(#000, 20%) !default;   // #333
+$gray:                  lighten(#000, 33.5%) !default; // #555
+$gray-light:            lighten(#000, 60%) !default;   // #999
+$gray-lighter:          lighten(#000, 93.5%) !default; // #eee
 $white:                 #fff !default;
 
 
 // Global Accent Colors
 // -------------------------------
-$blue:                  #049cdb !default;
-$blueDark:              #0064cd !default;
-$green:                 #46a546 !default;
-$red:                   #9d261d !default;
-$yellow:                #ffc40d !default;
-$orange:                #f89406 !default;
-$pink:                  #c3325f !default;
-$purple:                #7a43b6 !default;
+$blue:                 #049cdb !default;
+$blue-dark:            #0064cd !default;
+$green:                #46a546 !default;
+$red:                  #9d261d !default;
+$yellow:               #ffc40d !default;
+$orange:               #f89406 !default;
+$pink:                 #c3325f !default;
+$purple:               #7a43b6 !default;
+
+$component-active-bg:            $brand-primary !default;
 
 
 // Global Fonts
 // -------------------------------
-$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$lightSansFontFamily:   "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
-$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace !default;
+$sans-font-family:         "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$light-sans-font-family:   "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$serif-font-family:        Georgia, "Times New Roman", Times, serif !default;
+$mono-font-family:         Monaco, Menlo, Consolas, "Courier New", monospace !default;
 
 
 // Base
 // -------------------------------
-$baseFontFamily:         $sansFontFamily;
-$baseBackgroundColor:    $white;
-$textColor:              $grayDark !default;
+$base-font-family:         $sans-font-family;
+$base-background-color:    $white;
 
 
 // Forms
 // -------------------------------
-$inputBackground:               $white !default;
-$inputBorder:                   $grayLight !default;
-$inputBorderRadius:             4px !default;
-$inputDisabledBackground:       $grayLighter !default;
-$formActionsBackground:         $grayLighter !default;
-$inputHeight:                   $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-$placeholderText:               $grayLight !default;
+$input-bg:                        $white  !default;
+$input-bg-disabled:               $gray-lighter !default;
 
+$input-color:                     $gray !default;
+$input-border-color:              #ccc !default;
+$input-border-width:              1px !default;
+$input-border-radius:             $border-radius-base !default;
+$input-border-focus:              #66afe9 !default;
+
+$input-color-placeholder:         $gray-light !default;
+
+$legend-color:                    $gray-dark !default;
+$legend-border-color:             #e5e5e5 !default;
+
+$input-group-addon-bg:            $gray-lighter !default;
+$input-group-addon-border-color:  $input-border-color !default;
 
-// Typography
-// -------------------------------
-$lightColor:            #fff;
-$darkColor:             #333;
 
 
 // Buttons
 // -------------------------------
-$buttonColor:           #222;
-$buttonPadding:         12px 12px;
-$buttonClearPadding:    10px 0px;
-$buttonBorderRadius:    2px;
-$buttonBorderWidth:     1px;
-$buttonFontSize:        16px;
+$button-color:            #222;
+$button-padding:          12px 12px;
+$button-clear-padding:    10px 0px;
+$button-border-radius:    2px;
+$button-border-width:     1px;
+$button-font-size:        16px;
 
 // Button block that has spacing
-$buttonBlockMargin: 10px 0 10px 0;
+$button-block-margin: 10px 0 10px 0;
 
-$buttonDefaultBackground:        #fff;
-$buttonDefaultBackgroundActive:  #eee;
-$buttonDefaultBorder:            #ddd;
+$button-default-bg:           #fff;
+$button-default-bg-active:    #eee;
+$buttonDefaultBorder:         #ddd;
 
-$buttonSecondaryBackground:        #f5f5f5;
-$buttonSecondaryBackgroundActive:  #eee;
-$buttonSecondaryBorder:            #ccc;
+$button-secondary-bg:         #f5f5f5;
+$button-secondary-bg-active:  #eee;
+$button-secondary-border:     #ccc;
 
-$buttonPrimaryBackground:        #6999e9;
-$buttonPrimaryBackgroundActive:  #eee;
-$buttonPrimaryBorder:            #5981c5;
+$button-primary-bg:           #6999e9;
+$button-primary-bg-active:    #eee;
+$button-primary-border:       #5981c5;
 
-$buttonInfoBackground:        #60d2e6;
-$buttonInfoBackgroundActive:  #eee;
-$buttonInfoBorder:            #51b3c4;
+$button-info-bg:              #60d2e6;
+$button-info-bg-active:       #eee;
+$button-info-border:          #51b3c4;
 
-$buttonSuccessBackground:        #89c163;
-$buttonSuccessBackgroundActive:  #eee;
-$buttonSuccessBorder:            #71a052;
+$button-success-bg:           #89c163;
+$button-success-bg-active:    #eee;
+$button-success-border:       #71a052;
 
-$buttonWarningBackground:        #f0b840;
-$buttonWarningBackgroundActive:  #eee;
-$buttonWarningBorder:            #cf9a29;
+$button-warning-bg:           #f0b840;
+$button-warning-bg-active:    #eee;
+$button-warning-border:       #cf9a29;
 
-$buttonDangerBackground:        #de5645;
-$buttonDangerBackgroundActive:  #eee;
-$buttonDangerBorder:            #bc4435;
+$button-danger-bg:            #de5645;
+$button-danger-bg-active:     #eee;
+$buttonDangerBorder:          #bc4435;
 
-$buttonDarkBackground:        #444;
-$buttonDarkBackgroundActive:  #eee;
-$buttonDarkBorder:            #111;
+$button-dark-bg:              #444;
+$button-dark-bg-active:       #eee;
+$button-dark-border:          #111;
 
 
 // Bars
 // -------------------------------
-$barBackground: white;
+$bar-bg:                      #fff;
 
 // Bar variations
-$barDefaultBackground: #fff;
-$barDefaultBorderColor: #ddd;
+$bar-default-bg:              #fff;
+$bar-default-border-color:    #ddd;
 
-$barSecondaryBackground: #f5f5f5;
-$barSecondaryBorderColor: #ccc;
+$bar-secondary-bg:            #f5f5f5;
+$bar-secondary-border-color:  #ccc;
 
-$barPrimaryBackground: #6999e9;
-$barPrimaryBorderColor: #5981c5;
+$bar-primary-bg:              #6999e9;
+$bar-primary-border-color:    #5981c5;
 
-$barInfoBackground: #60d2e6;
-$barInfoBorderColor: #51b3c4;
+$bar-info-bg:                 #60d2e6;
+$bar-info-border-color:       #51b3c4;
 
-$barSuccessBackground: #89c163;
-$barSuccessBorderColor: #71a052;
+$bar-success-bg:              #89c163;
+$bar-success-border-color:    #71a052;
 
-$barWarningBackground: #f0b840;
-$barWarningBorderColor: #cf9a29;
+$bar-warning-bg:              #f0b840;
+$bar-warning-border-color:    #cf9a29;
 
-$barDangerBackground: #de5645;
-$barDangerBorderColor: #bc4435;
+$bar-danger-bg:               #de5645;
+$bar-danger-border-color:     #bc4435;
 
-$barDarkBackground: #444;
-$barDarkBorderColor: #111;
+$bar-dark-bg:                 #444;
+$bar-dark-border-color:       #111;
 
 
 // Lists
 // -------------------------------
-$listDividerBackground: #f5f5f5;
-$listDividerColor: #222;
+$list-divider-bg:       #f5f5f5;
+$list-divider-color:    #222;
 
 
-// Form states and alerts
+// Form States and Alerts
 // -------------------------------
-$warningText:             #c09853;
-$warningBackground:       #fcf8e3;
-$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+$warning-text:       #c09853;
+$warning-bg:         #fcf8e3;
+$warning-border:     darken(adjust-hue($warning-bg, -10), 3%);
 
-$errorText:               #b94a48;
-$errorBackground:         #f2dede;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+$error-text:         #b94a48;
+$error-bg:           #f2dede;
+$error-border:       darken(adjust-hue($error-bg, -10), 3%);
 
-$successText:             #468847;
-$successBackground:       #dff0d8;
-$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+$success-text:       #468847;
+$success-bg:         #dff0d8;
+$success-border:     darken(adjust-hue($success-bg, -10), 5%);
 
-$infoText:                #3a87ad;
-$infoBackground:          #d9edf7;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+$info-text:          #3a87ad;
+$info-bg:            #d9edf7;
+$info-border:        darken(adjust-hue($info-bg, -10), 7%);
 
 
-// Panels
+// Side Menu
 // -------------------------------
-$menuBackgroundColor:    #eee;
-$menuInsetBorderColor:   #bbb;
+$menu-bg:                   #eee;
+$menu-inset-border-color:   #bbb;
diff --git a/scss/ionic/structure/_alerts.scss b/scss/ionic/structure/_alerts.scss
index b84659bee2..9a5c5a5fed 100644
--- a/scss/ionic/structure/_alerts.scss
+++ b/scss/ionic/structure/_alerts.scss
@@ -18,7 +18,7 @@
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
 }
 
 
diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss
index 3662bb9fd0..ddf8bd1a85 100644
--- a/scss/ionic/structure/_bar.scss
+++ b/scss/ionic/structure/_bar.scss
@@ -1,7 +1,7 @@
 
 // Use Flexbox for our header and footer bars
 .bar {
-  @include disable-user-select();
+  @include user-select(none);
 
   display: -webkit-box;
   display: box;
@@ -11,8 +11,8 @@
   right: 0;
   z-index: 10;
   width: 100%;
-  height: $barHeight;
-  padding: $barPaddingPortrait;
+  height: $bar-height;
+  padding: $bar-padding-portrait;
   box-sizing: border-box;
 
 
@@ -26,7 +26,7 @@
     left: 0;
     right: 0;
 
-    line-height: $barHeight;
+    line-height: $bar-height;
 
     margin: 0;
     //padding: $barPaddingVertical 0px;
@@ -38,7 +38,7 @@
 
     text-align: center;
     white-space: nowrap;
-    font-size: $barTitleFontSize;
+    font-size: $bar-title-font-size;
 
   }
 
@@ -50,13 +50,13 @@
   .button {
     @include box-flex(0);
     background-color: transparent;
-    line-height: $barButtonLineHeight;
+    line-height: $bar-button-line-height;
     font-size: 12px;
     padding: 4px 12px;
   }
 
   .button-bar {
-    line-height: $barButtonBarLineHeight;
+    line-height: $bar-button-bar-line-height;
   }
 
   .button-bar + .button, .button + .button-bar {
@@ -91,19 +91,19 @@
 }
 
 .bar-header-secondary {
-  top: $barHeight;
+  top: $bar-height;
 }
 .bar-footer-secondary {
-  bottom: $barHeight;
+  bottom: $bar-height;
 }
 
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
 .has-header {
-  top: $barHeight;
+  top: $bar-height;
 }
 
 .has-footer {
-  bottom: $barHeight;
+  bottom: $bar-height;
 }
 
diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/structure/_base.scss
index 137942bd8e..59bdf46438 100644
--- a/scss/ionic/structure/_base.scss
+++ b/scss/ionic/structure/_base.scss
@@ -3,8 +3,7 @@
 // Make sure iOS Safari doesn't scale fonts on orientation changes
 html {
   -webkit-text-size-adjust: 100%;
-
-  @include disable-user-select();
+  @include user-select(none);
 }
 
 body {
@@ -46,15 +45,15 @@ body {
 }
 
 .content-padded {
-  padding: $contentPadding;
+  padding: $content-padding;
 }
 
 .inset {
-  margin: $insetMargin;
+  margin: $inset-margin;
 }
 
 .rounded {
-  border-radius: $roundedRadius;
+  border-radius: $border-radius-base;
 }
 
 // Remove tap highlight color on Safari
diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss
index 8df19e00e3..d16c496ea1 100644
--- a/scss/ionic/structure/_button-group.scss
+++ b/scss/ionic/structure/_button-group.scss
@@ -76,7 +76,7 @@
   @include box-flex(1);
   // Fix for box-flex width issue
 
-  line-height: $buttonBarButtonLineHeight;
+  line-height: $button-bar-button-line-height;
   border-radius: 0;
   
   overflow: hidden;
diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss
index 2950cc55c2..d42bee6302 100644
--- a/scss/ionic/structure/_button.scss
+++ b/scss/ionic/structure/_button.scss
@@ -12,7 +12,7 @@
   }
 
   &.button-block {
-    margin: $buttonBlockMargin;
+    margin: $button-block-margin;
     display: block;
     width: 100%;
   }
diff --git a/scss/ionic/structure/_form.scss b/scss/ionic/structure/_form.scss
index dda82f9253..f08748d8af 100644
--- a/scss/ionic/structure/_form.scss
+++ b/scss/ionic/structure/_form.scss
@@ -4,7 +4,7 @@
 
 // Make all forms have space below them
 form {
-  margin: 0 0 $baseLineHeight;
+  margin: 0 0 $line-height-base;
 }
 
 fieldset {
@@ -18,17 +18,17 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: $baseLineHeight;
-  font-size: $baseFontSize * 1.5;
-  line-height: $baseLineHeight * 2;
-  color: $grayDark;
+  margin-bottom: $line-height-base;
+  font-size: $font-size-base * 1.5;
+  line-height: $line-height-base * 2;
+  color: $gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 
   // Small
   small {
-    font-size: $baseLineHeight * .75;
-    color: $grayLight;
+    font-size: $line-height-base * .75;
+    color: $gray-light;
   }
 }
 
@@ -38,77 +38,66 @@ input,
 button,
 select,
 textarea {
-  @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
+  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
 }
 input,
 button,
 select,
 textarea {
-  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
+  font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element)
+}
+
+.form-group {
+  border-top: $input-border-width solid $input-border-color;
+  border-bottom: $input-border-width solid $input-border-color;
+  background-color: $input-bg;
+  overflow: hidden;
+}
+.content-padded > .form-group,
+.form-group.inset {
+  border-left: $input-border-width solid $input-border-color;
+  border-right: $input-border-width solid $input-border-color;
+  @include border-radius($input-border-radius);
+}
+
+.form-group .input-wrapper + .input-wrapper {
+  border-top: $input-border-width solid $input-border-color;
+}
+
+.form-group + .form-group {
+  margin-top: $content-padding;
 }
 
 .input-wrapper {
   display: block;
-  border-top: 1px solid $inputBorder;
-  border-bottom: 1px solid $inputBorder;
-  padding: 4px 7px 3px;
+  padding: 6px 8px 5px;
+  overflow: hidden;
 
   input {
+    background-color: transparent;
     margin: 0;
     -webkit-appearance: none;
+    @include border-radius(0);
   }
 
   .input-label {
     font-weight: bold;
-    line-height: $baseLineHeightComputed + $baseFontSize;
-  }
-
-}
-
-.content-padded > .input-wrapper,
-.input-wrapper.inset 
-{
-  border-left: 1px solid $inputBorder;
-  border-right: 1px solid $inputBorder;
-  @include border-radius($textInputBorderRadius);
-}
-.input-wrapper.row-fluid {
-  width: auto;
-}
-
-.stacked-label {
-  padding: 0;
-  input {
-    border: 1px solid $inputBorder;
+    line-height: $line-height-computed + $font-size-base;
   }
 }
-.stacked-label {
+
+.form-group.stacked-label,
+.form-group.stacked-label .input-wrapper {
+  background-color: transparent;
   border: 0;
-  input {
-    border: 1px solid $inputBorder !important;
-    padding: $baseLineHeightComputed $baseLineHeightComputed/2 !important;
-    @include border-radius($textInputBorderRadius);
-  }
-  span {
-    font-weight: bold;
-    line-height: $baseLineHeightComputed;
-  }
 }
-.content > .input-wrapper.stacked-label input {
-    border-left: 0 !important;
-    border-right: 0 !important;
-    @include border-radius(0);
-}
-.content-padded > .input-wrapper.stacked-label,
-.content > .input-wrapper.stacked-label.inset 
-{
-  border: 0 !important;
-}
-.content > .input-wrapper.stacked-label.inset input {
-  border: 1px solid $inputBorder !important;
-}
-.input-wrapper + .input-wrapper {
-  border-top: 0 !important;
+
+.form-group.stacked-label input {
+  border: $input-border-width solid $input-border-color;
+  background-color: $input-bg;
+  padding: 4px 8px 3px;
+  overflow: hidden;
+  @include border-radius($input-border-radius);
 }
 
 
@@ -134,9 +123,9 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: $baseLineHeightComputed + $baseFontSize;
-  font-size: $baseFontSize;
-  line-height: $baseLineHeightComputed;
+  height: $line-height-computed + $font-size-base;
+  font-size: $font-size-base;
+  line-height: $line-height-computed;
   color: $gray;
   vertical-align: middle;
 }
@@ -169,7 +158,6 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  background-color: $inputBackground;
   border: 0;
 
   // Focus state
@@ -203,15 +191,15 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
-  line-height: $inputHeight;
+  height: $input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  line-height: $input-height-base;
 }
 
 // Make select elements obey height by applying a border
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
-  border: 1px solid $inputBorder;
-  background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+  border: $input-border-width solid $input-border-color;
+  background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
 }
 
 // Make multiple select elements height not fixed
@@ -229,31 +217,6 @@ input[type="checkbox"]:focus {
 }
 
 
-// Uneditable inputs
-// -------------------------------
-
-// Make uneditable inputs look inactive
-.uneditable-input,
-.uneditable-textarea {
-  color: $grayLight;
-  background-color: darken($inputBackground, 1%);
-  border-color: $inputBorder;
-  cursor: not-allowed;
-}
-
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
-  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
-  white-space: nowrap;
-}
-
-// Make uneditable textareas behave like a textarea
-.uneditable-textarea {
-  width: auto;
-  height: auto;
-}
-
-
 // Placeholder
 // -------------------------------
 input,
@@ -262,111 +225,9 @@ textarea {
 }
 
 
-// CHECKBOXES & RADIOS
-// -------------------------------
-
-// Indent the labels to position radios/checkboxes as hanging
-.radio,
-.checkbox {
-  min-height: $baseLineHeight; // clear the floating input if there is no label text
-  padding-left: 20px;
-}
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
-  float: left;
-  margin-left: -20px;
-}
-
-// Move the options list down to align with labels
-.controls > .radio:first-child,
-.controls > .checkbox:first-child {
-  padding-top: 5px; // has to be padding because margin collaspes
-}
-
-// Radios and checkboxes on same line
-// TODO v3: Convert .inline to .control-inline
-.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; // space out consecutive inline controls
-}
-
-
-
-// INPUT SIZES
-// -------------------------------
-
-// General classes for quick sizes
-.input-mini       { width: 60px; }
-.input-small      { width: 90px; }
-.input-medium     { width: 150px; }
-.input-large      { width: 210px; }
-.input-xlarge     { width: 270px; }
-.input-xxlarge    { width: 530px; }
-
-// Grid style input sizes
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"],
-.uneditable-input[class*="span"],
-// Redeclare since the fluid row class is more specific
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
-  float: none;
-  margin-left: 0;
-}
-// Ensure input-prepend/append never wraps
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
-  display: inline-block;
-}
-
-
-
-// GRID SIZING FOR INPUTS
-// -------------------------------
-
-// Grid sizes
-@include grid-input($gridColumnWidth, $gridGutterWidth);
-
-// Control row for multiple inputs per line
-.controls-row {
-  @include clearfix(); // Clear the float from controls
-}
-
-// Float to collapse white-space for proper grid alignment
-.controls-row [class*="span"],
-// Redeclare the fluid grid collapse since we undo the float for inputs
-.row-fluid .controls-row [class*="span"] {
-  float: left;
-}
-// Explicity set top padding on all checkboxes/radios, not just first-child
-.controls-row .checkbox[class*="span"],
-.controls-row .radio[class*="span"] {
-  padding-top: 5px;
-}
-
-
-
 
 // DISABLED STATE
-// --------------
+// -------------------------------
 
 // Disabled and read-only inputs
 input[disabled],
@@ -376,7 +237,7 @@ input[readonly],
 select[readonly],
 textarea[readonly] {
   cursor: not-allowed;
-  background-color: $inputDisabledBackground;
+  background-color: $input-bg-disabled;
 }
 // Explicitly reset the colors here
 input[type="radio"][disabled],
@@ -386,345 +247,3 @@ input[type="checkbox"][readonly] {
   background-color: transparent;
 }
 
-
-
-
-// FORM FIELD FEEDBACK STATES
-// --------------------------
-
-// Warning
-.control-group.warning {
-  @include formFieldState($warningText, $warningText, $warningBackground);
-}
-// Error
-.control-group.error {
-  @include formFieldState($errorText, $errorText, $errorBackground);
-}
-// Success
-.control-group.success {
-  @include formFieldState($successText, $successText, $successBackground);
-}
-// Info
-.control-group.info {
-  @include formFieldState($infoText, $infoText, $infoBackground);
-}
-
-// HTML5 invalid states
-// Shares styles with the .control-group.error above
-input:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-  }
-}
-
-
-
-// FORM ACTIONS
-// ------------
-
-.form-actions {
-  padding: ($baseLineHeight - 1) 20px $baseLineHeight;
-  margin-top: $baseLineHeight;
-  margin-bottom: $baseLineHeight;
-  background-color: $formActionsBackground;
-  border-top: 1px solid #e5e5e5;
-  @include clearfix(); // Adding clearfix to allow for .pull-right button containers
-}
-
-
-
-// HELP TEXT
-// ---------
-
-.help-block,
-.help-inline {
-  color: lighten($textColor, 15%); // lighten the text some for contrast
-}
-
-.help-block {
-  display: block; // account for any element using help-block
-  margin-bottom: $baseLineHeight / 2;
-}
-
-.help-inline {
-  display: inline-block;
-  @include ie7-inline-block();
-  vertical-align: middle;
-  padding-left: 5px;
-}
-
-
-
-// INPUT GROUPS
-// ------------
-
-// Allow us to put symbols and text within the input field for a cleaner look
-.input-append,
-.input-prepend {
-  display: inline-block;
-  margin-bottom: $baseLineHeight / 2;
-  vertical-align: middle;
-  font-size: 0; // white space collapse hack
-  white-space: nowrap; // Prevent span and input from separating
-
-  // Reset the white space collapse hack
-  input,
-  select,
-  .uneditable-input,
-  .dropdown-menu,
-  .popover {
-    font-size: $baseFontSize;
-  }
-
-  input,
-  select,
-  .uneditable-input {
-    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
-    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
-    vertical-align: top;
-    // Make input on top when focused so blue border and shadow always show
-    &:focus {
-      z-index: 2;
-    }
-  }
-  .add-on {
-    display: inline-block;
-    width: auto;
-    height: $baseLineHeight;
-    min-width: 16px;
-    padding: 4px 5px;
-    font-size: $baseFontSize;
-    font-weight: normal;
-    line-height: $baseLineHeight;
-    text-align: center;
-    text-shadow: 0 1px 0 $white;
-    background-color: $grayLighter;
-    border: 1px solid #ccc;
-  }
-  .add-on,
-  .btn,
-  .btn-group > .dropdown-toggle {
-    vertical-align: top;
-    @include border-radius(0);
-  }
-  .active {
-    background-color: lighten($green, 30);
-    border-color: $green;
-  }
-}
-
-.input-prepend {
-  .add-on,
-  .btn {
-    margin-right: -1px;
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    // FYI, `.btn:first-child` accounts for a button group that's prepended
-    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
-  }
-}
-
-.input-append {
-  input,
-  select,
-  .uneditable-input {
-    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
-    + .btn-group .btn:last-child {
-      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
-    }
-  }
-  .add-on,
-  .btn,
-  .btn-group {
-    margin-left: -1px;
-  }
-  .add-on:last-child,
-  .btn:last-child,
-  .btn-group:last-child > .dropdown-toggle {
-    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
-  }
-}
-
-// Remove all border-radius for inputs with both prepend and append
-.input-prepend.input-append {
-  input,
-  select,
-  .uneditable-input {
-    @include border-radius(0);
-    + .btn-group .btn {
-      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
-    }
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    margin-right: -1px;
-    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
-  }
-  .add-on:last-child,
-  .btn:last-child {
-    margin-left: -1px;
-    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
-  }
-  .btn-group:first-child {
-    margin-left: 0;
-  }
-}
-
-
-
-
-// SEARCH FORM
-// -----------
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
-  margin-bottom: 0; // Remove the default margin on all inputs
-  @include border-radius(15px);
-}
-
-/* Allow for input prepend/append in search forms */
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  @include border-radius(0); // Override due to specificity
-}
-.form-search .input-append .search-query {
-  @include border-radius(14px 0 0 14px);
-}
-.form-search .input-append .btn {
-  @include border-radius(0 14px 14px 0);
-}
-.form-search .input-prepend .search-query {
-  @include border-radius(0 14px 14px 0);
-}
-.form-search .input-prepend .btn {
-  @include border-radius(14px 0 0 14px);
-}
-
-
-
-
-// HORIZONTAL & VERTICAL FORMS
-// ---------------------------
-
-// Common properties
-// -----------------
-
-.form-search,
-.form-inline,
-.form-horizontal {
-  input,
-  textarea,
-  select,
-  .help-inline,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    display: inline-block;
-    @include ie7-inline-block();
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  // Re-hide hidden elements due to specifity
-  .hide {
-    display: none;
-  }
-}
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
-}
-// Remove margin for input-prepend/-append
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
-}
-// Inline checkbox/radio labels (remove padding on left)
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  padding-left: 0;
-  margin-bottom: 0;
-  vertical-align: middle;
-}
-// Remove float and margin, set to inline-block
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-  float: left;
-  margin-right: 3px;
-  margin-left: 0;
-}
-
-
-// Margin to space out fieldsets
-.control-group {
-  margin-bottom: $baseLineHeight / 2;
-}
-
-// Legend collapses margin, so next element is responsible for spacing
-legend + .control-group {
-  margin-top: $baseLineHeight;
-  -webkit-margin-top-collapse: separate;
-}
-
-// Horizontal-specific styles
-// --------------------------
-
-.form-horizontal {
-  // Increase spacing between groups
-  .control-group {
-    margin-bottom: $baseLineHeight;
-    @include clearfix();
-  }
-  // Float the labels left
-  .control-label {
-    float: left;
-    width: $horizontalComponentOffset - 20;
-    padding-top: 5px;
-    text-align: right;
-  }
-  // Move over all input controls and content
-  .controls {
-    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
-    // don't inherit the margin of the parent, in this case .controls
-    *display: inline-block;
-    *padding-left: 20px;
-    margin-left: $horizontalComponentOffset;
-    &:first-child {
-      *padding-left: $horizontalComponentOffset;
-    }
-  }
-  // Remove bottom margin on block level help text since that's accounted for on .control-group
-  .help-block {
-    margin-bottom: 0;
-  }
-  // And apply it only to .help-block instances that follow a form control
-  input,
-  select,
-  textarea,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    + .help-block {
-      margin-top: $baseLineHeight / 2;
-    }
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-actions {
-    padding-left: $horizontalComponentOffset;
-  }
-}
diff --git a/scss/ionic/structure/_grid.scss b/scss/ionic/structure/_grid.scss
index f2b910a16f..7b33ecd39b 100644
--- a/scss/ionic/structure/_grid.scss
+++ b/scss/ionic/structure/_grid.scss
@@ -3,19 +3,344 @@
 // --------------------------------------------------
 
 
-// Fixed (940px)
-@include grid-core($gridColumnWidth, $gridGutterWidth);
-
-// Fluid (940px)
-@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
-
-// Reset utility classes due to specificity
-[class*="span"].hide,
-.row-fluid [class*="span"].hide {
-  display: none;
+// Set the container width, and override it for fixed navbars in media queries
+.container {
+  @include container-fixed();
 }
 
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
-  float: right;
+// mobile first defaults
+.row {
+  @include make-row();
+}
+
+// Common styles for small and large grid columns
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width / 2);
+}
+
+
+// Extra small grid
+//
+// Grid classes for extra small devices like smartphones. No offset, push, or
+// pull classes are present here due to the size of the target.
+//
+// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
+  float: left;
+}
+.col-xs-1  { width: percentage((1 / $grid-columns)); }
+.col-xs-2  { width: percentage((2 / $grid-columns)); }
+.col-xs-3  { width: percentage((3 / $grid-columns)); }
+.col-xs-4  { width: percentage((4 / $grid-columns)); }
+.col-xs-5  { width: percentage((5 / $grid-columns)); }
+.col-xs-6  { width: percentage((6 / $grid-columns)); }
+.col-xs-7  { width: percentage((7 / $grid-columns)); }
+.col-xs-8  { width: percentage((8 / $grid-columns)); }
+.col-xs-9  { width: percentage((9 / $grid-columns)); }
+.col-xs-10 { width: percentage((10/ $grid-columns)); }
+.col-xs-11 { width: percentage((11/ $grid-columns)); }
+.col-xs-12 { width: 100%; }
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+//
+// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-tablet) {
+  .container {
+    max-width: $container-tablet;
+  }
+
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11 {
+    float: left;
+  }
+  .col-sm-1  { width: percentage((1 / $grid-columns)); }
+  .col-sm-2  { width: percentage((2 / $grid-columns)); }
+  .col-sm-3  { width: percentage((3 / $grid-columns)); }
+  .col-sm-4  { width: percentage((4 / $grid-columns)); }
+  .col-sm-5  { width: percentage((5 / $grid-columns)); }
+  .col-sm-6  { width: percentage((6 / $grid-columns)); }
+  .col-sm-7  { width: percentage((7 / $grid-columns)); }
+  .col-sm-8  { width: percentage((8 / $grid-columns)); }
+  .col-sm-9  { width: percentage((9 / $grid-columns)); }
+  .col-sm-10 { width: percentage((10/ $grid-columns)); }
+  .col-sm-11 { width: percentage((11/ $grid-columns)); }
+  .col-sm-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-sm-push-1  { left: percentage((1 / $grid-columns)); }
+  .col-sm-push-2  { left: percentage((2 / $grid-columns)); }
+  .col-sm-push-3  { left: percentage((3 / $grid-columns)); }
+  .col-sm-push-4  { left: percentage((4 / $grid-columns)); }
+  .col-sm-push-5  { left: percentage((5 / $grid-columns)); }
+  .col-sm-push-6  { left: percentage((6 / $grid-columns)); }
+  .col-sm-push-7  { left: percentage((7 / $grid-columns)); }
+  .col-sm-push-8  { left: percentage((8 / $grid-columns)); }
+  .col-sm-push-9  { left: percentage((9 / $grid-columns)); }
+  .col-sm-push-10 { left: percentage((10/ $grid-columns)); }
+  .col-sm-push-11 { left: percentage((11/ $grid-columns)); }
+
+  .col-sm-pull-1  { right: percentage((1 / $grid-columns)); }
+  .col-sm-pull-2  { right: percentage((2 / $grid-columns)); }
+  .col-sm-pull-3  { right: percentage((3 / $grid-columns)); }
+  .col-sm-pull-4  { right: percentage((4 / $grid-columns)); }
+  .col-sm-pull-5  { right: percentage((5 / $grid-columns)); }
+  .col-sm-pull-6  { right: percentage((6 / $grid-columns)); }
+  .col-sm-pull-7  { right: percentage((7 / $grid-columns)); }
+  .col-sm-pull-8  { right: percentage((8 / $grid-columns)); }
+  .col-sm-pull-9  { right: percentage((9 / $grid-columns)); }
+  .col-sm-pull-10 { right: percentage((10/ $grid-columns)); }
+  .col-sm-pull-11 { right: percentage((11/ $grid-columns)); }
+
+  // Offsets
+  .col-sm-offset-1  { margin-left: percentage((1 / $grid-columns)); }
+  .col-sm-offset-2  { margin-left: percentage((2 / $grid-columns)); }
+  .col-sm-offset-3  { margin-left: percentage((3 / $grid-columns)); }
+  .col-sm-offset-4  { margin-left: percentage((4 / $grid-columns)); }
+  .col-sm-offset-5  { margin-left: percentage((5 / $grid-columns)); }
+  .col-sm-offset-6  { margin-left: percentage((6 / $grid-columns)); }
+  .col-sm-offset-7  { margin-left: percentage((7 / $grid-columns)); }
+  .col-sm-offset-8  { margin-left: percentage((8 / $grid-columns)); }
+  .col-sm-offset-9  { margin-left: percentage((9 / $grid-columns)); }
+  .col-sm-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+  .col-sm-offset-11 { margin-left: percentage((11/ $grid-columns)); }
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+//
+// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-desktop) {
+  .container {
+    max-width: $container-desktop;
+  }
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11 {
+    float: left;
+  }
+  .col-md-1  { width: percentage((1 / $grid-columns)); }
+  .col-md-2  { width: percentage((2 / $grid-columns)); }
+  .col-md-3  { width: percentage((3 / $grid-columns)); }
+  .col-md-4  { width: percentage((4 / $grid-columns)); }
+  .col-md-5  { width: percentage((5 / $grid-columns)); }
+  .col-md-6  { width: percentage((6 / $grid-columns)); }
+  .col-md-7  { width: percentage((7 / $grid-columns)); }
+  .col-md-8  { width: percentage((8 / $grid-columns)); }
+  .col-md-9  { width: percentage((9 / $grid-columns)); }
+  .col-md-10 { width: percentage((10/ $grid-columns)); }
+  .col-md-11 { width: percentage((11/ $grid-columns)); }
+  .col-md-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-md-push-0  { left: auto; }
+  .col-md-push-1  { left: percentage((1 / $grid-columns)); }
+  .col-md-push-2  { left: percentage((2 / $grid-columns)); }
+  .col-md-push-3  { left: percentage((3 / $grid-columns)); }
+  .col-md-push-4  { left: percentage((4 / $grid-columns)); }
+  .col-md-push-5  { left: percentage((5 / $grid-columns)); }
+  .col-md-push-6  { left: percentage((6 / $grid-columns)); }
+  .col-md-push-7  { left: percentage((7 / $grid-columns)); }
+  .col-md-push-8  { left: percentage((8 / $grid-columns)); }
+  .col-md-push-9  { left: percentage((9 / $grid-columns)); }
+  .col-md-push-10 { left: percentage((10/ $grid-columns)); }
+  .col-md-push-11 { left: percentage((11/ $grid-columns)); }
+
+  .col-md-pull-0  { right: auto; }
+  .col-md-pull-1  { right: percentage((1 / $grid-columns)); }
+  .col-md-pull-2  { right: percentage((2 / $grid-columns)); }
+  .col-md-pull-3  { right: percentage((3 / $grid-columns)); }
+  .col-md-pull-4  { right: percentage((4 / $grid-columns)); }
+  .col-md-pull-5  { right: percentage((5 / $grid-columns)); }
+  .col-md-pull-6  { right: percentage((6 / $grid-columns)); }
+  .col-md-pull-7  { right: percentage((7 / $grid-columns)); }
+  .col-md-pull-8  { right: percentage((8 / $grid-columns)); }
+  .col-md-pull-9  { right: percentage((9 / $grid-columns)); }
+  .col-md-pull-10 { right: percentage((10/ $grid-columns)); }
+  .col-md-pull-11 { right: percentage((11/ $grid-columns)); }
+
+  // Offsets
+  .col-md-offset-0  { margin-left: 0; }
+  .col-md-offset-1  { margin-left: percentage((1 / $grid-columns)); }
+  .col-md-offset-2  { margin-left: percentage((2 / $grid-columns)); }
+  .col-md-offset-3  { margin-left: percentage((3 / $grid-columns)); }
+  .col-md-offset-4  { margin-left: percentage((4 / $grid-columns)); }
+  .col-md-offset-5  { margin-left: percentage((5 / $grid-columns)); }
+  .col-md-offset-6  { margin-left: percentage((6 / $grid-columns)); }
+  .col-md-offset-7  { margin-left: percentage((7 / $grid-columns)); }
+  .col-md-offset-8  { margin-left: percentage((8 / $grid-columns)); }
+  .col-md-offset-9  { margin-left: percentage((9 / $grid-columns)); }
+  .col-md-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+  .col-md-offset-11 { margin-left: percentage((11/ $grid-columns)); }
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+//
+// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-lg-desktop) {
+  .container {
+    max-width: $container-lg-desktop;
+  }
+
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11 {
+    float: left;
+  }
+  .col-lg-1  { width: percentage((1 / $grid-columns)); }
+  .col-lg-2  { width: percentage((2 / $grid-columns)); }
+  .col-lg-3  { width: percentage((3 / $grid-columns)); }
+  .col-lg-4  { width: percentage((4 / $grid-columns)); }
+  .col-lg-5  { width: percentage((5 / $grid-columns)); }
+  .col-lg-6  { width: percentage((6 / $grid-columns)); }
+  .col-lg-7  { width: percentage((7 / $grid-columns)); }
+  .col-lg-8  { width: percentage((8 / $grid-columns)); }
+  .col-lg-9  { width: percentage((9 / $grid-columns)); }
+  .col-lg-10 { width: percentage((10/ $grid-columns)); }
+  .col-lg-11 { width: percentage((11/ $grid-columns)); }
+  .col-lg-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-lg-push-0  { left: auto; }
+  .col-lg-push-1  { left: percentage((1 / $grid-columns)); }
+  .col-lg-push-2  { left: percentage((2 / $grid-columns)); }
+  .col-lg-push-3  { left: percentage((3 / $grid-columns)); }
+  .col-lg-push-4  { left: percentage((4 / $grid-columns)); }
+  .col-lg-push-5  { left: percentage((5 / $grid-columns)); }
+  .col-lg-push-6  { left: percentage((6 / $grid-columns)); }
+  .col-lg-push-7  { left: percentage((7 / $grid-columns)); }
+  .col-lg-push-8  { left: percentage((8 / $grid-columns)); }
+  .col-lg-push-9  { left: percentage((9 / $grid-columns)); }
+  .col-lg-push-10 { left: percentage((10/ $grid-columns)); }
+  .col-lg-push-11 { left: percentage((11/ $grid-columns)); }
+
+  .col-lg-pull-0  { right: auto; }
+  .col-lg-pull-1  { right: percentage((1 / $grid-columns)); }
+  .col-lg-pull-2  { right: percentage((2 / $grid-columns)); }
+  .col-lg-pull-3  { right: percentage((3 / $grid-columns)); }
+  .col-lg-pull-4  { right: percentage((4 / $grid-columns)); }
+  .col-lg-pull-5  { right: percentage((5 / $grid-columns)); }
+  .col-lg-pull-6  { right: percentage((6 / $grid-columns)); }
+  .col-lg-pull-7  { right: percentage((7 / $grid-columns)); }
+  .col-lg-pull-8  { right: percentage((8 / $grid-columns)); }
+  .col-lg-pull-9  { right: percentage((9 / $grid-columns)); }
+  .col-lg-pull-10 { right: percentage((10/ $grid-columns)); }
+  .col-lg-pull-11 { right: percentage((11/ $grid-columns)); }
+
+  // Offsets
+  .col-lg-offset-0  { margin-left: 0; }
+  .col-lg-offset-1  { margin-left: percentage((1 / $grid-columns)); }
+  .col-lg-offset-2  { margin-left: percentage((2 / $grid-columns)); }
+  .col-lg-offset-3  { margin-left: percentage((3 / $grid-columns)); }
+  .col-lg-offset-4  { margin-left: percentage((4 / $grid-columns)); }
+  .col-lg-offset-5  { margin-left: percentage((5 / $grid-columns)); }
+  .col-lg-offset-6  { margin-left: percentage((6 / $grid-columns)); }
+  .col-lg-offset-7  { margin-left: percentage((7 / $grid-columns)); }
+  .col-lg-offset-8  { margin-left: percentage((8 / $grid-columns)); }
+  .col-lg-offset-9  { margin-left: percentage((9 / $grid-columns)); }
+  .col-lg-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+  .col-lg-offset-11 { margin-left: percentage((11/ $grid-columns)); }
 }
diff --git a/scss/ionic/structure/_listview.scss b/scss/ionic/structure/_listview.scss
index ec063b3a1e..cef41ec647 100644
--- a/scss/ionic/structure/_listview.scss
+++ b/scss/ionic/structure/_listview.scss
@@ -15,7 +15,7 @@
   margin-bottom: -1px;
 
   //background-color: $list-group-bg;
-  border: $listItemBorder;
+  border: $list-item-border;
 
   // Round the first and last items
   &:first-child {
diff --git a/scss/ionic/structure/_menu.scss b/scss/ionic/structure/_menu.scss
index b5024e88df..ce27e74d1f 100644
--- a/scss/ionic/structure/_menu.scss
+++ b/scss/ionic/structure/_menu.scss
@@ -5,7 +5,7 @@
 .menu {
   min-height: 100%;
   max-height: 100%;
-  width: $menuWidth;
+  width: $menu-width;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -23,7 +23,7 @@
 .menu-right { right: 0; }
 
 .menu-animated {
-  -webkit-transition: -webkit-transform $menuAnimationSpeed ease;
-  -moz-transition: -moz-transform $menuAnimationSpeed ease;
-  transition: transform $menuAnimationSpeed ease;
+  -webkit-transition: -webkit-transform $menu-animation-speed ease;
+  -moz-transition: -moz-transform $menu-animation-speed ease;
+  transition: transform $menu-animation-speed ease;
 }
diff --git a/scss/ionic/theme/_alerts.scss b/scss/ionic/theme/_alerts.scss
index fa4e46b4c3..283f105296 100644
--- a/scss/ionic/theme/_alerts.scss
+++ b/scss/ionic/theme/_alerts.scss
@@ -7,15 +7,15 @@
 // -------------------------
 
 .alert {
-  margin-bottom: $baseLineHeight;
+  margin-bottom: $line-height-base;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: $warningBackground;
-  border: 1px solid $warningBorder;
+  background-color: $warning-bg;
+  border: 1px solid $warning-border;
 }
 .alert,
 .alert h4 {
   // Specified for the h4 to prevent conflicts of changing $headingsColor
-  color: $warningText;
+  color: $warning-text;
 }
 
 
@@ -23,29 +23,29 @@
 // -------------------------
 
 .alert-success {
-  background-color: $successBackground;
-  border-color: $successBorder;
-  color: $successText;
+  background-color: $success-bg;
+  border-color: $success-border;
+  color: $success-text;
 }
 .alert-success h4 {
-  color: $successText;
+  color: $success-text;
 }
 .alert-danger,
 .alert-error {
-  background-color: $errorBackground;
-  border-color: $errorBorder;
-  color: $errorText;
+  background-color: $error-bg;
+  border-color: $error-border;
+  color: $error-text;
 }
 .alert-danger h4,
 .alert-error h4 {
-  color: $errorText;
+  color: $error-text;
 }
 .alert-info {
-  background-color: $infoBackground;
-  border-color: $infoBorder;
-  color: $infoText;
+  background-color: $info-bg;
+  border-color: $info-border;
+  color: $info-text;
 }
 .alert-info h4 {
-  color: $infoText;
+  color: $info-text;
 }
 
diff --git a/scss/ionic/theme/_bar.scss b/scss/ionic/theme/_bar.scss
index 510ecba1c6..9efe3e0d8e 100644
--- a/scss/ionic/theme/_bar.scss
+++ b/scss/ionic/theme/_bar.scss
@@ -1,5 +1,5 @@
 .bar {
-  background-color: $barBackground;
+  background-color: $bar-bg;
   border-style: solid;
   border-width: 0;
 
@@ -11,70 +11,70 @@
   }
 
   &.bar-default {
-    background-color: $barDefaultBackground;
-    border-color: $barDefaultBorderColor;
-    color: $darkColor;
+    background-color: $bar-default-bg;
+    border-color: $bar-default-border-color;
+    color: $gray-dark;
     .tab-item a {
-      color: $darkColor;
+      color: $gray-dark;
     }
   }
 
   &.bar-secondary {
-    background-color: $barSecondaryBackground;
-    border-color: $barSecondaryBorderColor;
-    color: $darkColor;
+    background-color: $bar-secondary-bg;
+    border-color: $bar-secondary-border-color;
+    color: $gray-dark;
     .tab-item a {
-      color: $darkColor;
+      color: $gray-dark;
     }
   }
   &.bar-primary {
-    background-color: $barPrimaryBackground;
-    border-color: $barPrimaryBorderColor;
-    color: $lightColor;
+    background-color: $bar-primary-bg;
+    border-color: $bar-primary-border-color;
+    color: $gray-light;
     .tab-item a {
-      color: $lightColor;
+      color: $gray-light;
     }
   }
   &.bar-info {
-    background-color: $barInfoBackground;
-    border-color: $barInfoBorderColor;
-    color: $lightColor;
+    background-color: $bar-info-bg;
+    border-color: $bar-info-border-color;
+    color: $gray-light;
     .tab-item a {
-      color: $lightColor;
+      color: $gray-light;
     }
   }
   &.bar-success {
-    background-color: $barSuccessBackground;
-    border-color: $barSuccessBorderColor;
-    color: $lightColor;
+    background-color: $bar-success-bg;
+    border-color: $bar-success-border-color;
+    color: $gray-light;
     .tab-item a {
-      color: $lightColor;
+      color: $gray-light;
     }
   }
   &.bar-warning {
-    background-color: $barWarningBackground;
-    border-color: $barWarningBorderColor;
-    color: $lightColor;
+    background-color: $bar-warning-bg;
+    border-color: $bar-warning-border-color;
+    color: $gray-light;
     .tab-item a {
-      color: $lightColor;
+      color: $gray-light;
     }
   }
   &.bar-danger {
-    background-color: $barDangerBackground;
-    border-color: $barDangerBorderColor;
-    color: $lightColor;
+    background-color: $bar-danger-bg;
+    border-color: $bar-danger-border-color;
+    color: $gray-light;
 
     .tab-item a {
-      color: $lightColor;
+      color: $gray-light;
     }
   }
   &.bar-dark {
-    background-color: $barDarkBackground;
-    border-color: $barDarkBorderColor;
-    color: $lightColor;
+    background-color: $bar-dark-bg;
+    border-color: $bar-dark-border-color;
+    color: $gray-light;
 
     .tab-item a {
-      color: $lightColor;
+      color: $gray-light;
     }
   }
 
@@ -89,49 +89,49 @@
 
 .bar-default {
   .button {
-    @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
+    @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
   }
 }
 
 .bar-secondary {
   .button {
-    @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
+    @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
   }
 }
 
 .bar-primary {
   .button {
-    @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
+    @include button-style($button-primary-bg, $button-primary-border, $gray-light);
   }
 }
 .bar-info {
   .button {
-    @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
+    @include button-style($button-info-bg, $button-info-border, $gray-light);
   }
 }
 .bar-success {
   .button {
-    @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
+    @include button-style($button-success-bg, $button-success-border, $gray-light);
   }
 }
 .bar-warning {
   .button {
-    @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
+    @include button-style($button-warning-bg, $button-warning-border, $gray-light);
   }
 }
 .bar-danger {
   .button {
-    @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
+    @include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
   }
 }
 .bar-dark {
   // A default style for buttons
   .button {
-    @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
+    @include button-style($button-dark-bg, $button-dark-border, $gray-light);
   }
 }
 
 .bar .button-icon {
   background-color: transparent;
   border: 1px solid transparent;
-}
\ No newline at end of file
+}
diff --git a/scss/ionic/theme/_base.scss b/scss/ionic/theme/_base.scss
index 7d6175ec4c..d8f9537b5e 100644
--- a/scss/ionic/theme/_base.scss
+++ b/scss/ionic/theme/_base.scss
@@ -2,11 +2,11 @@
 body {
   font-size: 14px;
   line-height: 1.25;
-  font-family: $baseFontFamily;
+  font-family: $base-font-family;
 }
 
 main {
-  background-color: $baseBackgroundColor;
+  background-color: $base-background-color;
 }
 
 .full-section {
diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/theme/_button.scss
index 998f200f57..f7f74b8764 100644
--- a/scss/ionic/theme/_button.scss
+++ b/scss/ionic/theme/_button.scss
@@ -1,34 +1,40 @@
 .button {
-	color: $buttonColor;
-	border-radius: $buttonBorderRadius;
-  border-width: $buttonBorderWidth;
+	color: $button-color;
+	border-radius: $button-border-radius;
+  border-width: $button-border-width;
   border-style: solid;
-	padding: $buttonPadding;
-  font-size: $buttonFontSize;
+	padding: $button-padding;
+  font-size: $button-font-size;
 
   &.button-default {
-    @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
+    @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
   }
   &.button-secondary {
-    @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
+    @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
   }
   &.button-primary {
-    @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
+    @include button-style($button-primary-bg, $button-primary-border, $gray-light);
   }
   &.button-info {
-    @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
+    @include button-style($button-info-bg, $button-info-border, $gray-light);
   }
   &.button-success {
-    @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
+    @include button-style($button-success-bg, $button-success-border, $gray-light);
   }
   &.button-warning {
-    @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
+    @include button-style($button-warning-bg, $button-warning-border, $gray-light);
   }
   &.button-danger {
-    @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
+    @include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
   }
   &.button-dark {
-    @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
+    @include button-style($button-dark-bg, $button-dark-border, $gray-light);
+  }
+
+  &.button-clear {
+    background: none;
+    border: none;
+    padding: $button-clear-padding;
   }
 }
 
diff --git a/scss/ionic/theme/_listview.scss b/scss/ionic/theme/_listview.scss
index 007f1e04e6..d1d74e6235 100644
--- a/scss/ionic/theme/_listview.scss
+++ b/scss/ionic/theme/_listview.scss
@@ -1,9 +1,9 @@
 .list-divider {
-  background-color: $listDividerBackground;
-  color: $listDividerColor;
+  background-color: $list-divider-bg;
+  color: $list-divider-color;
   font-weight: bold;
 }
 
 a.list-item {
-  color: $darkColor;
+  color: $gray-dark;
 }
diff --git a/scss/ionic/theme/_menu.scss b/scss/ionic/theme/_menu.scss
index 22f632bf66..462e82e97b 100644
--- a/scss/ionic/theme/_menu.scss
+++ b/scss/ionic/theme/_menu.scss
@@ -1,12 +1,12 @@
 
 .ion-panel {
-  background: $menuBackgroundColor;
+  background: $menu-bg;
 }
 
 .ion-panel-left .ion-panel {
-  border-right: 1px solid $menuInsetBorderColor;
+  border-right: 1px solid $menu-inset-border-color;
 }
 
 .ion-panel-right .ion-panel {
-  border-left: 1px solid $menuInsetBorderColor;
+  border-left: 1px solid $menu-inset-border-color;
 }
diff --git a/scss/ionic/theme/_tabs.scss b/scss/ionic/theme/_tabs.scss
index fc71f67983..4b0748ff6c 100644
--- a/scss/ionic/theme/_tabs.scss
+++ b/scss/ionic/theme/_tabs.scss
@@ -3,7 +3,7 @@
 }
 .tab-item {
   a {
-    font-family: $lightSansFontFamily;
+    font-family: $light-sans-font-family;
     font-weight: 200;
 
     .active, &:active {