compass-bootstrap-rails 0.1.3.3 → 0.1.4.0

data/vendor/assets/stylesheets/compass-bootstrap/_mixins.scss

@@ -1,36 +1,37 @@
-/* Variables.less
+/* Mixins.less
  * Snippets of reusable CSS to develop faster and keep code readable
  * ----------------------------------------------------------------- */
 
+
 // Clearfix for clearing floats like a boss h5bp.com/q
 @mixin clearfix() {
   zoom: 1;
-	&:before,
+  &:before,
   &:after {
     display: table;
     content: "";
     zoom: 1;
     *display: inline;
-	}
-	&:after {
+  }
+  &:after {
     clear: both;
-	}
+  }
 }
 
 // Center-align a block level element
 @mixin center-block() {
-	display: block;
+  display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
 // Sizing shortcuts
 @mixin size($height: 5px, $width: 5px) {
-	height: $height;
-	width: $width;
+  height: $height;
+  width: $width;
 }
 @mixin square($size: 5px) {
-	@include size($size, $size);
+  @include size($size, $size);
 }
 
 // Input placeholder text
@@ -44,28 +45,30 @@
 }
 
 // Font Stacks
-@mixin font-shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
-}
-@mixin font-sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
-}
-@mixin font-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
-  font-family: "Georgia", Times New Roman, Times, serif;
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
-}
-@mixin font-monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
-  font-family: "Monaco", Courier New, monospace;
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
+#font {
+  @mixin shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+  @mixin sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+  @mixin serif($weight: normal, $size: 14px, $lineHeight: 20px) {
+    font-family: "Georgia", Times New Roman, Times, serif;
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+  @mixin monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
+    font-family: "Monaco", Courier New, monospace;
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
 }
 
 // Grid System
@@ -109,102 +112,114 @@
 
 // Transitions
 @mixin transition($transition) {
-	-webkit-transition: $transition;
-	   -moz-transition: $transition;
- 	    -ms-transition: $transition;
-	     -o-transition: $transition;
-	        transition: $transition;
+-webkit-transform-style: e(%("preserve-3d"));
+    -webkit-transition: $transition;
+       -moz-transition: $transition;
+        -ms-transition: $transition;
+         -o-transition: $transition;
+            transition: $transition;
 }
 
 // Background clipping
 @mixin background-clip($clip) {
-	-webkit-background-clip: $clip;
-	   -moz-background-clip: $clip;
-	        background-clip: $clip;
+  -webkit-background-clip: $clip;
+     -moz-background-clip: $clip;
+          background-clip: $clip;
 }
 
 // CSS3 Content Columns
 @mixin content-columns($columnCount, $columnGap: 20px) {
-	-webkit-column-count: $columnCount;
-	   -moz-column-count: $columnCount;
+  -webkit-column-count: $columnCount;
+     -moz-column-count: $columnCount;
           column-count: $columnCount;
   -webkit-column-gap: $columnGap;
-	   -moz-column-gap: $columnGap;
+     -moz-column-gap: $columnGap;
           column-gap: $columnGap;
 }
 
+
+// Make any element resizable for prototyping
+@mixin resizable($direction: both) {
+  resize: $direction; // Options are horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
-@mixin translucent-background($color: $white, $alpha: 1) {
+#translucent {
+  @mixin 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);
-	background-clip: padding-box;
+  }
+  @mixin border($color: $white, $alpha: 1) {
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+    background-clip: padding-box;
+  }
 }
 
 // Gradient Bar Colors for buttons and allerts
 @mixin gradientBar($primaryColor, $secondaryColor) {
-  @include gradient-vertical($primaryColor, $secondaryColor);
+  #gradient > @include vertical($primaryColor, $secondaryColor);
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 }
 
 // Gradients
-@mixin gradient-horizontal ($startColor: #555, $endColor: #333) {
-  background-color: $endColor;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
-  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
-  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
-  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $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(left, $startColor, $endColor); // Le standard
-  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
-}
-@mixin gradient-vertical ($startColor: #555, $endColor: #333) {
-  background-color: $endColor;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
-  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
-  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $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(top, $startColor, $endColor); // The standard
-  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$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: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
-  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); // The standard
-}
-@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
-  background-color: $endColor;
-  background-repeat: no-repeat;
-  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: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
-  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
+#gradient {
+  @mixin horizontal ($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
+    background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $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(left, $startColor, $endColor); // Le standard
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",$startColor,$endColor)); // IE9 and down
+  }
+  @mixin vertical ($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
+    background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $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(top, $startColor, $endColor); // The standard
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",$startColor,$endColor)); // IE9 and down
+  }
+  @mixin 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: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
+    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); // The standard
+  }
+  @mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+    background-color: $endColor;
+    background-repeat: no-repeat;
+    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: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+    background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+    background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",$startColor,$endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+  }
 }
 
 // Reset filters for IE
 @mixin reset-filter() {
-  filter: progid:DXImageTransform.Microsoft.Gradient(enabled = false);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
 // Opacity
 @mixin opacity($opacity: 100) {
-	filter: alpha(opacity='#{$opacity}');
-	-khtml-opacity: $opacity / 100;
-	  -moz-opacity: $opacity / 100;
-	       opacity: $opacity / 100;
+  filter: e(%("alpha(opacity=%d)", $opacity));
+  -khtml-opacity: $opacity / 100;
+    -moz-opacity: $opacity / 100;
+         opacity: $opacity / 100;
 }

data/vendor/assets/stylesheets/compass-bootstrap/_patterns.scss

@@ -25,7 +25,7 @@
   // Hover and active states
   // h3 for backwards compatibility
   h3 a:hover,
-  .brand a:hover,
+  .brand:hover,
   ul .active > a {
     background-color: #333;
     background-color: rgba(255,255,255,.05);
@@ -74,12 +74,12 @@
   input {
     background-color: #444;
     background-color: rgba(255,255,255,.3);
-    @include font-sans-serif(13px, normal, 1);
+    @include sans-serif(13px, normal, 1);
     padding: 4px 9px;
     color: $white;
     color: rgba(255,255,255,.75);
     border: 1px solid #111;
-    @include border-radius(4px);
+    @include@include border-radius(4px);
     $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
     @include box-shadow($shadow);
     @include transition(none);
@@ -116,7 +116,7 @@
 .topbar-inner,
 .topbar .fill {
   background-color: #222;
-  @include gradient-vertical(#333, #222);
+  @include vertical(#333, #222);
   $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
   @include box-shadow($shadow);
 }
@@ -193,7 +193,7 @@
       color: #999;
       text-shadow: 0 1px 0 rgba(0,0,0,.5);
       &:hover {
-        @include gradient-vertical(#292929,#191919);
+        @include vertical(#292929,#191919);
         color: $white;
       }
     }
@@ -278,7 +278,8 @@ a.menu:after,
   }
 }
 
-.topbar .dropdown-menu, .dropdown-menu {
+.topbar .dropdown-menu,
+.dropdown-menu {
   // Links within the dropdown menu
   a {
     display: block;
@@ -289,8 +290,9 @@ a.menu:after,
     color: $gray;
     text-shadow: 0 1px 0 $white;
     // Hover state
-    &:hover {
-      @include gradient-vertical(#eeeeee, #dddddd);
+    &:hover,
+    &.hover {
+      @include vertical(#eeeeee, #dddddd);
       color: $grayDark;
       text-decoration: none;
       $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
@@ -318,10 +320,13 @@ a.menu:after,
 }
 
 
-// Tabs and Pills
+// TABS AND PILLS
+// --------------
+
+// Common styles
 .tabs,
 .pills {
-  margin: 0 0 20px;
+  margin: 0 0 @baseline;
   padding: 0;
   list-style: none;
   @include clearfix();
@@ -333,18 +338,18 @@ a.menu:after,
   }
 }
 
-// Basic Tabs
+// Tabs
 .tabs {
-  float: left;
-  width: 100%;
-  border-bottom: 1px solid #ddd;
+  border-color: #ddd;
+  border-style: solid;
+  border-width: 0 0 1px;
   > li {
     position: relative; // For the dropdowns mostly
-    top: 1px;
+    margin-bottom: -1px;
     > a {
       padding: 0 15px;
       margin-right: 2px;
-      line-height: $baseline * 2;
+      line-height: ($baseline * 2) - 2;
       border: 1px solid transparent;
       @include border-radius(4px 4px 0 0);
       &:hover {
@@ -353,13 +358,19 @@ a.menu:after,
         border-color: #eee #eee #ddd;
       }
     }
-    &.active > a {
+    // Active state, and it's :hover to override normal :hover
+    .active > a,
+    .active > a:hover {
       color: $gray;
       background-color: $white;
       border: 1px solid #ddd;
       border-bottom-color: transparent;
+      cursor: default;
     }
   }
+
+// Dropdowns in tabs
+.tabs {
   // first one for backwards compatibility
   .menu-dropdown,
   .dropdown-menu {
@@ -385,37 +396,43 @@ a.menu:after,
     border-top-color: #555;
   }
 }
-.tab-content {
-  clear: both;
-}
 
-// Basic pill nav
+// Pills
 .pills {
   a {
-      margin: 5px 3px 5px 0;
+    margin: 5px 3px 5px 0;
     padding: 0 15px;
-    text-shadow: 0 1px 1px $white;
     line-height: 30px;
+    text-shadow: 0 1px 1px $white;
     @include border-radius(15px);
     &:hover {
-      background: $linkColorHover;
       color: $white;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,.25);
+      background: $linkColorHover;
     }
   }
   .active a {
-    background: $linkColor;
     color: $white;
     text-shadow: 0 1px 1px rgba(0,0,0,.25);
+    background: $linkColor;
   }
 }
 
-.tab-content > *,
-.pill-content > * {
-  display: none;
+
+// Stacked pills
+.pills-vertical > li {
+  float: none;
 }
 
+// Tabbable areas
+.tab-content,
+.pill-content {
+}
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+  display: none;
+}
 .tab-content > .active,
 .pill-content > .active {
   display:block;
@@ -426,9 +443,9 @@ a.menu:after,
 // -----------
 
 .breadcrumb {
-  margin: 0 0 $baseline;
   padding: 7px 14px;
-  @include gradient-vertical(#ffffff, #f5f5f5);
+  margin: 0 0 $baseline;
+  @include vertical(#ffffff, #f5f5f5);
   border: 1px solid #ddd;
   @include border-radius(3px);
   @include box-shadow(inset 0 1px 0 $white);
@@ -440,8 +457,6 @@ a.menu:after,
     padding: 0 5px;
     color: $grayLight;
   }
-  a {
-  }
   .active a {
     color: $grayDark;
   }
@@ -505,6 +520,11 @@ footer {
   &.info:hover {
     color: $white
   }
+  // Sets the close button to the middle of message
+  .close{
+    font-family: Arial, sans-serif;
+    line-height: 18px;
+  }
   // Danger and error appear as red
   &.danger,
   &.error {
@@ -525,7 +545,7 @@ footer {
   // Button Base
   cursor: pointer;
   display: inline-block;
-  @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+  @include vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
   padding: 5px 14px 6px;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   color: #333;
@@ -558,7 +578,8 @@ footer {
   @include transition(.1s linear all);
 
   // Active and Disabled states
-  &:active {
+  &:active,
+  :active {
     $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
     @include box-shadow($shadow);
   }
@@ -594,15 +615,15 @@ footer {
 // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
 :root .alert-message,
 :root .btn {
-    border-radius: 0 \0;
+ @include border-radius: 0 \0;
 }
 
 // Help Firefox not be a jerk about adding extra padding to buttons
 button.btn,
 input[type=submit].btn {
   &::-moz-focus-inner {
-  	padding: 0;
-  	border: 0;
+    padding: 0;
+    border: 0;
   }
 }
 
@@ -616,7 +637,7 @@ input[type=submit].btn {
   font-weight: bold;
   line-height: $baseline * .75;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
-  @include opacity(20);
+  @include opacity(25);
   &:hover {
     color: $black;
     text-decoration: none;
@@ -643,7 +664,20 @@ input[type=submit].btn {
 
   // Adjust close icon
   .close {
-    *margin-top: 3px; /* IE7 spacing */
+    margin-top: 1px;
+    *margin-top: 0; /* For IE7 */
+  }
+
+  // Make links same color as text and stand out more
+  a {
+    font-weight: bold;
+    color: $grayDark;
+  }
+  &.danger p a,
+  &.error p a,
+  &.success p a,
+  &.info p a {
+    color: $white;
   }
 
   // Remove extra margin from content
@@ -700,6 +734,14 @@ input[type=submit].btn {
       background-color: lighten(#6bd0ee, 25%);
       border-color: lighten(#6bd0ee, 20%);
     }
+    // Change link color back
+    &.danger p a,
+    &.error p a,
+    &.success p a,
+    &.info p a {
+      color: $grayDark;
+    }
+
   }
 }
 
@@ -780,7 +822,8 @@ input[type=submit].btn {
   &.fade { opacity: 0; }
 }
 
-.modal-backdrop, .modal-backdrop.fade.in {
+.modal-backdrop,
+.modal-backdrop.fade.in {
   @include opacity(80);
 }
 
@@ -790,7 +833,7 @@ input[type=submit].btn {
   left: 50%;
   z-index: 11000;
   width: 560px;
-  margin: -250px 0 0 -250px;
+  margin: -250px 0 0 -280px;
   background-color: $white;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
@@ -812,6 +855,9 @@ input[type=submit].btn {
 .modal-body {
   padding: 15px;
 }
+.modal-body form {
+  margin-bottom: 0;
+}
 .modal-footer {
   background-color: #f5f5f5;
   padding: 14px 15px 15px;
@@ -826,41 +872,49 @@ input[type=submit].btn {
   }
 }
 
+// Fix the stacking of these components when in modals
+.modal .popover,
+.modal .twipsy {
+  z-index: 12000;
+}
+
 
 // POPOVER ARROWS
 // --------------
 
-@mixin popoverArrow-above($arrowWidth: 5px) {
-  bottom: 0;
-  left: 50%;
-  margin-left: -$arrowWidth;
-  border-left: $arrowWidth solid transparent;
-  border-right: $arrowWidth solid transparent;
-  border-top: $arrowWidth solid $black;
-}
-@mixin popoverArrow-left($arrowWidth: 5px) {
-  top: 50%;
-  right: 0;
-  margin-top: -$arrowWidth;
-  border-top: $arrowWidth solid transparent;
-  border-bottom: $arrowWidth solid transparent;
-  border-left: $arrowWidth solid $black;
-}
-@mixin popoverArrow-below($arrowWidth: 5px) {
-  top: 0;
-  left: 50%;
-  margin-left: -$arrowWidth;
-  border-left: $arrowWidth solid transparent;
-  border-right: $arrowWidth solid transparent;
-  border-bottom: $arrowWidth solid $black;
-}
-@mixin popoverArrow-right($arrowWidth: 5px) {
-  top: 50%;
-  left: 0;
-  margin-top: -$arrowWidth;
-  border-top: $arrowWidth solid transparent;
-  border-bottom: $arrowWidth solid transparent;
-  border-right: $arrowWidth solid $black;
+#popoverArrow {
+  @mixin above($arrowWidth: 5px) {
+    bottom: 0;
+    left: 50%;
+    margin-left: -$arrowWidth;
+    border-left: $arrowWidth solid transparent;
+    border-right: $arrowWidth solid transparent;
+    border-top: $arrowWidth solid $black;
+  }
+  @mixin left($arrowWidth: 5px) {
+    top: 50%;
+    right: 0;
+    margin-top: -$arrowWidth;
+    border-top: $arrowWidth solid transparent;
+    border-bottom: $arrowWidth solid transparent;
+    border-left: $arrowWidth solid $black;
+  }
+  @mixin below($arrowWidth: 5px) {
+    top: 0;
+    left: 50%;
+    margin-left: -$arrowWidth;
+    border-left: $arrowWidth solid transparent;
+    border-right: $arrowWidth solid transparent;
+    border-bottom: $arrowWidth solid $black;
+  }
+  @mixin right($arrowWidth: 5px) {
+    top: 50%;
+    left: 0;
+    margin-top: -$arrowWidth;
+    border-top: $arrowWidth solid transparent;
+    border-bottom: $arrowWidth solid transparent;
+    border-right: $arrowWidth solid $black;
+  }
 }
 
 // TWIPSY
@@ -873,14 +927,14 @@ input[type=submit].btn {
   padding: 5px;
   font-size: 11px;
   z-index: 1000;
-  @include opacity(80);
+  .opacity(80);
   &.fade.in {
     @include opacity(80);
   }
-  &.above .twipsy-arrow   { @include popoverArrow-above(); }
-  &.left .twipsy-arrow    { @include popoverArrow-left(); }
-  &.below .twipsy-arrow   { @include popoverArrow-below(); }
-  &.right .twipsy-arrow   { @include popoverArrow-right(); }
+  &.above .twipsy-arrow   { @include above(); }
+  &.left .twipsy-arrow    { @include left(); }
+  &.below .twipsy-arrow   { @include below(); }
+  &.right .twipsy-arrow   { @include right(); }
 }
 .twipsy-inner {
   padding: 3px 8px;
@@ -908,18 +962,18 @@ input[type=submit].btn {
   z-index: 1000;
   padding: 5px;
   display: none;
-  &.above .arrow { @include popoverArrow-above(); }
-  &.right .arrow { @include popoverArrow-right(); }
-  &.below .arrow { @include popoverArrow-below(); }
-  &.left .arrow  { @include popoverArrow-left(); }
+  &.above .arrow { @include above(); }
+  &.right .arrow { @include right(); }
+  &.below .arrow { @include below(); }
+  &.left .arrow  { @include left(); }
   .arrow {
     position: absolute;
     width: 0;
     height: 0;
   }
   .inner {
-    background-color: $black;
-    background-color: rgba(0,0,0,.8);
+    background: $black;
+    background: rgba(0,0,0,.8);
     padding: 3px;
     overflow: hidden;
     width: 280px;
@@ -962,11 +1016,12 @@ input[type=submit].btn {
 
 .label {
   padding: 1px 3px 2px;
-  background-color: $grayLight;
   font-size: $basefont * .75;
   font-weight: bold;
   color: $white;
   text-transform: uppercase;
+  white-space: nowrap;
+  background-color: $grayLight;
   @include border-radius(3px);
   &.important { background-color: #c43c35; }
   &.warning   { background-color: $orange; }
@@ -979,7 +1034,7 @@ input[type=submit].btn {
 // -----------
 
 .media-grid {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   margin-bottom: 0;
   @include clearfix();
   li {
@@ -988,7 +1043,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 4px;
-    margin: 0 0 20px 20px;
+    margin: 0 0 @baseline @gridGutterWidth;
     border: 1px solid #ddd;
     @include border-radius(4px);
     @include box-shadow(0 1px 1px rgba(0,0,0,.075));