Move bootstrap @LESS variables to CSS var()

dev/Styles/@Main.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/alerts.less";
 @import "../../vendors/bootstrap/less/code.less";
 @import "../../vendors/bootstrap/less/dropdowns.less";
-@import "../../vendors/bootstrap/less/navs.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 
 @import "_FontasticToBoot.less";

dev/Styles/Main.less

@@ -11,7 +11,7 @@ html, body {
 
 #rl-app {
 	-webkit-touch-callout: none;
-	font-size: @baseFontSize;
+	font-size: var(--main-font-size, 14px);
 	line-height: 1.15; /* 1 */
 	position: fixed;
 	top: 0;
@@ -58,7 +58,7 @@ dialog::backdrop {
 
 dialog {
 	border: 0;
-	background-color: @white;
+	background-color: var(--dialog-bg-clr, #fff);
 	border: 1px solid rgba(0,0,0,.3);
 	border-radius: 6px;
 	box-shadow: 0 5px 80px rgba(0,0,0,0.3);

dev/Styles/Ui.less

@@ -115,18 +115,17 @@ tr:hover .drag-handle {
 	border-radius: 4px 4px 0 0;
 	cursor: pointer;
 	grid-row-start: 1;
-	line-height: @baseLineHeight;
 	opacity: 0.6;
 	margin: 0 2px -1px 0;
 	padding: 5px;
 	text-align: center;
 	&:hover {
-		border-color: @grayLighter;
+		border-color: var(--tab-hover-border-clr, #eee);
 		opacity: 0.8;
 	}
 }
 .tabs > [id^="tab"]:checked + label {
-	background-color: @white;
+	background-color: var(--tab-active-bg-clr, #fff);
 	border-color: rgba(128,128,128,.5) rgba(128,128,128,.5) transparent rgba(128,128,128,.5);
 	opacity: 1;
 	z-index: 1;

dev/Styles/User/EmailAddresses.less

@@ -1,9 +1,10 @@
 .emailaddresses {
-	background-color: #fff;
+	background-color: var(--input-bg-clr, #fff);
-	border: 1px solid #ccc;
+	border: 1px solid var(--input-border-clr, #ccc);
-	border-radius: 3px;
+	border-radius: var(--input-border-radius, 3px);
 	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
 	box-sizing: border-box;
+	color: var(--input-clr, #555);
 	cursor: text;
 	font-size: 90%;
 	list-style: none;
@@ -15,7 +16,7 @@
 }
 
 .emailaddresses.emailaddresses-focused {
-	border: 1px solid darken(@inputBorder, 20%);
+	border-color: var(--input-focus-border-clr, #999);
 	box-shadow: none;
 }
 

dev/Styles/User/FolderList.less

@@ -147,9 +147,9 @@
 	.b-folders-user a[data-unread]:not(.system)::after
 	{
 		content: attr(data-unread);
-		background-color: @grayLight;
+		background-color: var(--unread-count-bg-color, #999);
 		border-radius: 9px;
-		color: @white;
+		color: var(--unread-count-color, #fff);
 		font-size: 11px;
 		line-height: 19px;
 		margin-top: 5px;

dev/Styles/User/Layout.less

@@ -155,7 +155,7 @@ html.rl-side-preview-pane {
 }
 
 .dropdown.show {
-	box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor);
+	box-shadow: 0 0 1px var(--main-color, #333);
 }
 
 .btn.btn-transparent {

dev/Styles/_BootstrapFix.less

@@ -1,17 +1,11 @@
 
 .legend {
-	display: block;
-	width: 100%;
-	padding: 0;
-	margin-bottom: @baseLineHeight;
-	font-size: @baseFontSize * 1.5;
-	line-height: @baseLineHeight * 1.5;
-	color: @grayDark;
-	border: 0;
 	border-bottom: 1px solid var(--border-color, #ddd);
+	font-size: 150%;
+	line-height: 2.1;
+	margin-bottom: 1.43em;
 }
 summary.legend {
-	display: list-item;
 	cursor: pointer;
 }
 
@@ -21,15 +15,14 @@ summary.legend {
 
 .alert a:not(.close) {
 	text-decoration: underline;
-	color: @warningText;
 }
 
 .alert.alert-info a:not(.close) {
-	color: @infoText;
+	color: var(--info-clr, #3a87ad);
 }
 
 .alert.alert-error a:not(.close) {
-	color: @errorText;
+	color: var(--error-clr, #b94a48);
 }
 
 /* mobile and tablet */

snappymail/v/0.0.0/themes/example.css

@@ -6,8 +6,22 @@
 	--main-bg-image: none; /* url("images/background.png"); */
 	--main-bg-size: auto;
 	--main-bg-repeat: repeat;
+	--main-font-size: 14px;
 	--link-color: #369;
 	--border-color: #ddd;
+	--hr-color: #eee;
+
+	--warning-clr: #c09853;
+	--warning-bg-clr: #fcf8e3;
+	--warning-border-clr: #fbeed5;
+
+	--error-clr: #b94a48;
+	--error-bg-clr: #f2dede;
+	--error-border-clr: #eed3d7;
+
+	--info-clr: #3a87ad;
+	--info-bg-clr: #d9edf7;
+	--info-border-clr: #bce8f1;
 
 /* LOADING */
 	--loading-color: #000;
@@ -42,6 +56,8 @@
 	--folders-hover-bg-color: false;
 	--folders-drop-color: #eee;
 	--folders-drop-bg-color: #333;
+	--unread-count-color: #fff;
+	--unread-count-bg-color: #333;
 
 /* SETTINGS */
 	--settings-menu-color: #333;
@@ -52,9 +68,32 @@
 
 /* MESSAGE LIST */
 	--message-list-toolbar-bg-color: #eee;
-	--message-list-toolbar-gradient-start: none; /* #f4f4f4 */
-	--message-list-toolbar-gradient-end: none;   /* #dfdfdf */
 
 /* MESSAGE */
 	--message-bg-color: #fff;
+
+/* DIALOGS */
+	--dialog-bg-clr: #fff;
+
+/* FORMS */
+	--btn-clr: #333;
+	--btn-bg-clr: #fff;
+	--btn-border-clr: #fff;
+	--btn-success-bg-clr: #84AB04;
+	--btn-danger-bg-clr: #ee5f5b;
+
+	--input-clr: #555;
+	--input-bg-clr: #fff;
+	--input-border-clr: #ccc;
+	--input-border-radius: 3px;
+	--input-focus-border-clr: #999;
+
+/* TABLES */
+	--tr-hover-bg-clr: #f5f5f5;
+	--tr-odd-bg-clr: #f9f9f9; /* when striped */
+
+/* TABS */
+	--tab-active-bg-clr: #fff;
+	--tab-hover-border-clr: #eee;
+
 }

vendors/bootstrap/less/alerts.less

@@ -8,14 +8,14 @@
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: 1.43em;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: @warningBackground;
+  background-color: var(--warning-bg-clr, #fcf8e3);
-  border: 1px solid @warningBorder;
+  border: 1px solid var(--warning-border-clr, #fbeed5);
   border-radius: 4px;
-  color: @warningText;
+  color: var(--warning-clr, #c09853);
   max-width: 800px;
-  min-height: @baseLineHeight;
+  min-height: 1.43em;
 }
 
 // Adjust close link position
@@ -23,7 +23,7 @@
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
 }
 
 
@@ -31,12 +31,12 @@
 // -------------------------
 
 .alert-error {
-  background-color: @errorBackground;
+  background-color: var(--error-bg-clr, #f2dede);
-  border-color: @errorBorder;
+  border-color: var(--error-border-clr, #eed3d7);
-  color: @errorText;
+  color: var(--error-clr, #b94a48);
 }
 .alert-info {
-  background-color: @infoBackground;
+  background-color: var(--info-bg-clr, #d9edf7);
-  border-color: @infoBorder;
+  border-color: var(--info-border-clr, #bce8f1);
-  color: @infoText;
+  color: var(--info-clr, #3a87ad);
 }

vendors/bootstrap/less/buttons.less

@@ -12,16 +12,16 @@
 
   display: inline-block;
   padding: 4px 12px;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid @btnBorder;
+  border: 1px solid var(--btn-border-clr, #bbb);
   border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  color: @grayDark;
+  color: var(--btn-clr, #333);
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: @btnBackground;
+  background-color: var(--btn-bg-clr, #fff);
   text-decoration: none;
 
   // Hover state
@@ -94,16 +94,16 @@
 // Warning appears are orange
 .btn-warning {
   color: #fff;
-  background-color: @btnWarningBackground;
+  background-color: #fbb450;
 }
 // Danger and error appear as red
 .btn-danger {
   color: #fff;
-  background-color: @btnDangerBackground;
+  background-color: var(--btn-danger-bg-clr, #ee5f5b);
 }
 // Success appears as green
 .btn-success {
-  background-color: @btnSuccessBackground;
+  background-color: var(--btn-success-bg-clr, #84AB04);
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }

vendors/bootstrap/less/close.less

@@ -7,7 +7,7 @@
   float: right;
   font-size: 143%;
   font-weight: bold;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
   color: inherit;
   cursor: pointer;
   text-decoration: none;

vendors/bootstrap/less/code.less

@@ -22,8 +22,8 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (@baseLineHeight / 2);
+  padding: 0.715em;
-  margin: 0 0 (@baseLineHeight / 2);
+  margin: 0 0 0.715em;
   white-space: pre-wrap;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: 4px;

vendors/bootstrap/less/dropdowns.less

@@ -17,15 +17,15 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: @zindexDropdown;
+  z-index: 1000;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
   color: var(--dropdown-menu-color, inherit);
-  background-color: var(--dropdown-menu-bg-color, @dropdownBackground);
+  background-color: var(--dropdown-menu-bg-color, #fff);
-  border: 1px solid @dropdownBorder;
+  border: 1px solid rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,0.2);
   background-clip: padding-box;
 
@@ -38,7 +38,7 @@
   // Links within the dropdown menu
   a {
     background-color: var(--dropdown-menu-bg-color, #fff);
-    color: var(--dropdown-menu-color, @dropdownLinkColor);
+    color: var(--dropdown-menu-color, #333);
     display: block;
     padding: 3px 10px;
     text-decoration: none;
@@ -60,7 +60,7 @@
 // Gray out text and ensure the hover state remains gray
 .dropdown-menu .disabled > a,
 .dropdown-menu .disabled > a:hover {
-  color: @grayLight;
+  color: #999;
   cursor: not-allowed;
   opacity: 0.5;
 }

vendors/bootstrap/less/forms.less

@@ -8,14 +8,14 @@
 
 // Make all forms have space below them
 form {
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 1.43em;
 }
 
 // Identify controls by their labels
 label {
   display: block;
   font-weight: normal;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
   margin-bottom: 5px;
 }
 
@@ -27,8 +27,8 @@ select,
 .select,
 textarea {
   font-family: inherit;
-  font-size: @baseFontSize;
+  font-size: var(--main-font-size, 14px);
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
   margin: 0;
   text-transform: none;
 }
@@ -44,25 +44,26 @@ input {
   box-sizing: border-box;
   display: inline-block;
   padding: 4px 6px;
-  color: @gray;
+  color: var(--input-clr, #555);
-  border-radius: @inputBorderRadius;
+  border-radius: var(--input-border-radius, 3px);
 }
 
 textarea,
 input {
-  background-color: @inputBackground;
+  background-color: var(--input-bg-clr, #fff);
-  border: 1px solid @inputBorder;
+  border: 1px solid var(--input-border-clr, #ccc);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   transition: border linear .2s, box-shadow linear .2s;
   width: 210px;
 
   // Focus state
   &:focus {
-    border-color: darken(@inputBorder, 20%);
+    border-color: var(--input-focus-border-clr, #999);
     box-shadow: none;
   }
 }
 
+
 // Position radios and checkboxes better
 input[type="radio"],
 input[type="checkbox"] {
@@ -83,8 +84,8 @@ select, .select {
   // Safari requires -webkit-
   -webkit-appearance: none;
   appearance: none;
-  background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
+  background: var(--input-bg-clr, #fff) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
-  border: 1px solid @inputBorder;
+  border: 1px solid var(--input-border-clr, #ccc);
   cursor: pointer;
   padding-right: 1.5em;
   width: 223px; // default input width + 10px of padding that doesn't get applied
@@ -139,7 +140,22 @@ textarea[readonly] {
 
 // Error
 .control-group.error {
-  .formFieldState(@errorText, @errorText, @errorBackground);
+  > label {
+    color: var(--error-clr, #b94a48);
+  }
+  // Style inputs accordingly
+  input,
+  select,
+  textarea {
+    color: var(--error-clr, #b94a48);
+    border-color: var(--error-border-clr, #eed3d7);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
+    &:focus {
+      border-color: var(--error-clr, #b94a48);
+      // Write out in full since the lighten() function isn't easily escaped
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--error-border-clr, #eed3d7);
+    }
+  }
 }
 
 // HORIZONTAL FORMS
@@ -161,7 +177,7 @@ textarea[readonly] {
 
 // Margin to space out fieldsets
 .control-group {
-  margin-bottom: (@baseLineHeight / 2);
+  margin-bottom: 0.715em;
 }
 
 // Horizontal-specific styles
@@ -170,7 +186,7 @@ textarea[readonly] {
 .form-horizontal {
   // Increase spacing between groups
   .control-group {
-    margin-bottom: @baseLineHeight;
+    margin-bottom: 1.43em;
 
     > label {
       display: inline-block;

vendors/bootstrap/less/mixins.less

@@ -29,29 +29,6 @@
 
 
 
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
-  // Set the text color
-  > label {
-    color: @textColor;
-  }
-  // Style inputs accordingly
-  input,
-  select,
-  textarea {
-    color: @textColor;
-    border-color: @borderColor;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
-    &:focus {
-      border-color: darken(@borderColor, 10%);
-      // Write out in full since the lighten() function isn't easily escaped
-      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
-    }
-  }
-}
-
-
-
 // COMPONENT MIXINS
 // --------------------------------------------------
 

vendors/bootstrap/less/navs.less

@@ -1,22 +0,0 @@
-//
-// Navs
-// --------------------------------------------------
-
-
-// BASE CLASS
-// ----------
-
-.nav {
-  margin-left: 0;
-  margin-bottom: @baseLineHeight;
-  list-style: none;
-}
-
-// Make links block level
-.nav > li > a {
-  display: block;
-}
-.nav > li > a:hover {
-  text-decoration: none;
-  background-color: @grayLighter;
-}

vendors/bootstrap/less/tables.less

@@ -9,19 +9,18 @@
 // table {
 .table {
   max-width: 100%;
-  background-color: @tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: 1.43em;
   // Cells
   th,
   td {
     padding: 8px;
-    line-height: @baseLineHeight;
+    line-height: 1.43em;
     text-align: left;
     vertical-align: text-top;
-    border-top: 1px solid @tableBorder;
+    border-top: 1px solid var(--border-color, #ddd);
   }
   th {
     font-weight: bold;
@@ -45,12 +44,12 @@
 // ----------------
 
 .table-bordered {
-  border: 1px solid @tableBorder;
+  border: 1px solid var(--border-color, #ddd);
   border-collapse: separate; // Done so we can round those corners!
   border-radius: 4px;
   th + th,
   td + td {
-    border-left: 1px solid @tableBorder;
+    border-left: 1px solid var(--border-color, #ddd);
   }
   // Prevent a double border
   colgroup + thead tr:first-child th,
@@ -105,7 +104,7 @@
   tbody {
     tr:nth-child(odd) td,
     tr:nth-child(odd) th {
-      background-color: @tableBackgroundAccent;
+      background-color: var(--tr-odd-bg-clr, #f9f9f9);
     }
   }
 }
@@ -118,7 +117,7 @@
   tbody {
     tr:hover td,
     tr:hover th {
-      background-color: @tableBackgroundHover;
+      background-color: var(--tr-hover-bg-clr, #f5f5f5);
     }
   }
 }

vendors/bootstrap/less/type.less

@@ -7,7 +7,7 @@
 // -------------------------
 
 p {
-  margin: (@baseLineHeight / 2) 0;
+  margin: 0.715em 0;
 }
 
 
@@ -33,7 +33,7 @@ cite {
 
 h1, h2, h3, h4, h5, h6 {
   line-height: 40px;
-  margin: (@baseLineHeight / 2) 0;
+  margin: 0.715em 0;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
 }
 h1 { font-size: 36px; }
@@ -51,7 +51,7 @@ h4, h5, h6 { line-height: 20px; }
 // Unordered and Ordered lists
 ul, ol {
   padding: 0;
-  margin: 0 0 (@baseLineHeight / 2) 25px;
+  margin: 0 0 0.715em 25px;
 }
 ul ul,
 ul ol,
@@ -60,7 +60,7 @@ ol ul {
   margin-bottom: 0;
 }
 li {
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
 }
 
 // MISC
@@ -68,29 +68,18 @@ li {
 
 // Horizontal rules
 hr {
-  margin: @baseLineHeight 0;
+  margin: 1.43em 0;
   border: 0;
-  border-bottom: 1px solid @hrBorder;
+  border-bottom: 1px solid var(--hr-color, #eee);
   box-sizing: content-box;
   height: 0;
 }
 
-// Abbreviations and acronyms
-abbr[title] {
-  cursor: help;
-  border-bottom: 1px dotted @grayLight;
-  text-decoration: none;
-}
-
 // Blockquotes
 blockquote {
   padding: 0 0 0 15px;
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 1.43em;
-  border-left: 5px solid @grayLighter;
+  border-left: 5px solid var(--border-color, #ddd);
-  p {
-    margin-bottom: 0;
-    line-height: (@baseLineHeight * 1.25);
-  }
 }
 
 // Quotes
@@ -104,7 +93,7 @@ blockquote::after {
 // Addresses
 address {
   display: block;
-  margin-bottom: @baseLineHeight;
+  margin-bottom: 1.43em;
   font-style: normal;
-  line-height: @baseLineHeight;
+  line-height: 1.43em;
 }

vendors/bootstrap/less/variables.less

@@ -2,133 +2,9 @@
 // Variables
 // --------------------------------------------------
 
-
-// Global values
-// --------------------------------------------------
-
-
-// Grays
-// -------------------------
-@black:                 #000;
-@grayDark:              #333;
-@gray:                  #555;
-@grayLight:             #999;
-@grayLighter:           #eee;
-@white:                 #fff;
-
-
-// Scaffolding
-// -------------------------
-@textColor:             @grayDark;
-
-
-// Links
-// -------------------------
-@linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15%);
-
-
-// Typography
-// -------------------------
-@baseFontSize:          14px;
-@baseLineHeight:        1.43em;
-
-// Tables
-// -------------------------
-@tableBackground:                   transparent; // overall background-color
-@tableBackgroundAccent:             #f9f9f9; // for striping
-@tableBackgroundHover:              #f5f5f5; // for hover
-@tableBorder:                       var(--border-color, #ddd); // table and cell border
-
-
-// Buttons
-// -------------------------
-@btnBackground:                     @white;
-@btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #bbb;
-
-@btnPrimaryBackground:              @linkColor;
-@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
-
-@btnInfoBackground:                 #5bc0de;
-@btnInfoBackgroundHighlight:        #2f96b4;
-
-@btnSuccessBackground:              #84AB04;
-@btnSuccessBackgroundHighlight:     #51a351;
-
-@btnWarningBackground:              lighten(#f89406, 15%);
-@btnWarningBackgroundHighlight:     #f89406;
-
-@btnDangerBackground:               #ee5f5b;
-@btnDangerBackgroundHighlight:      #bd362f;
-
-
-// Forms
-// -------------------------
-@inputBackground:               @white;
-@inputBorder:                   #ccc;
-@inputBorderRadius:             3px;
-@formActionsBackground:         #f5f5f5;
-
-// Dropdowns
-// -------------------------
-@dropdownBackground:            @white;
-@dropdownBorder:                rgba(0,0,0,.2);
-@dropdownDividerTop:            #e5e5e5;
-@dropdownDividerBottom:         @white;
-
-@dropdownLinkColor:             @grayDark;
-
-@dropdownLinkColorHover:        @white;
-@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
-
-@dropdownLinkColorActive:       @dropdownLinkColor;
-@dropdownLinkBackgroundActive:  @linkColor;
-
-
-
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-@zindexDropdown:          1000;
-@zindexPopover:           1010;
-@zindexTooltip:           1030;
-@zindexFixedNavbar:       1030;
-@zindexModal:             1101;
-
-
-// Hr border color
-// -------------------------
-@hrBorder:                @grayLighter;
-
-
-// Form states and alerts
-// -------------------------
-@warningText:             #c09853;
-@warningBackground:       #fcf8e3;
-@warningBorder:           darken(spin(@warningBackground, -10), 3%);
-
-@errorText:               #b94a48;
-@errorBackground:         #f2dede;
-@errorBorder:             darken(spin(@errorBackground, -10), 3%);
-
-@successText:             #468847;
-@successBackground:       #dff0d8;
-@successBorder:           darken(spin(@successBackground, -10), 5%);
-
-@infoText:                #3a87ad;
-@infoBackground:          #d9edf7;
-@infoBorder:              darken(spin(@infoBackground, -10), 7%);
-
-
 // GRID
 // --------------------------------------------------
 
-
 // Default 940px grid
 // -------------------------
 @gridColumns:             12;