kickoff 0.0.2

data/lib/generators/kickoff/layout/templates/_patterns.scss

@@ -0,0 +1,960 @@
+/* patters.css.scss
+ * Repeatable UI elements outside the base styles provided from the scaffolding
+ * ---------------------------------------------------------------------------- */
+
+
+// TOPBAR
+// ------
+
+// Topbar for Branding and Nav
+.topbar {
+  height: 40px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  overflow: visible;
+
+  // Links get text shadow
+  a {
+    color: $grayLight;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  }
+
+  // Hover and active states
+  // h3 for backwards compatibility
+  h3 a:hover, .brand a:hover, ul .active > a {
+    background-color: #333;
+    background-color: rgba(255,255,255,.05);
+    color: $white;
+    text-decoration: none;
+  }
+
+  // Website name
+  // h3 left for backwards compatibility
+  h3 {
+    position: relative;
+  }
+  h3 a, .brand {
+    float: left;
+    display: block;
+    padding: 8px 20px 12px;
+    margin-left: -20px; // negative indent to left-align the text down the page
+    color: $white;
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 1;
+  }
+
+  // Plain text in topbar
+  p {
+    margin: 0;
+    line-height: 40px;
+    a:hover {
+      background-color: transparent;
+      color: $white;
+    }
+  }
+
+  // Search Form
+  form {
+    float: left;
+    margin: 5px 0 0 0;
+    position: relative;
+    @include opacity(100);
+  }
+  // Todo: remove from v2.0 when ready, added for legacy
+  form.pull-right {
+    float: right;
+  }
+  input {
+    background-color: #444;
+    background-color: rgba(255,255,255,.3);
+    @include sans-serif-font(13px, normal, 1);
+    padding: 4px 9px;
+    color: $white;
+    color: rgba(255,255,255,.75);
+    border: 1px solid #111;
+    @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);
+
+    // Placeholder text gets special styles; can't be bundled together though for some reason
+    &:-moz-placeholder {
+      color: $grayLighter;
+    }
+    &::-webkit-input-placeholder {
+      color: $grayLighter;
+    }
+    // Hover states
+    &:hover {
+      background-color: $grayLight;
+      background-color: rgba(255,255,255,.5);
+      color: $white;
+    }
+    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    &:focus, &.focused {
+      outline: 0;
+      background-color: $white;
+      color: $grayDark;
+      text-shadow: 0 1px 0 $white;
+      border: 0;
+      padding: 5px 10px;
+      @include box-shadow(0 0 3px rgba(0,0,0,.15));
+    }
+  }
+}
+
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+// For backwards compatibility, include .topbar .fill
+.topbar-inner, .topbar .fill {
+  background-color: #222;
+  @include vertical-gradient(#333, #222);
+  $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  @include box-shadow($shadow);
+}
+
+// NAVIGATION
+// ----------
+
+// Topbar Nav
+// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
+// For backwards compatibility, leave in .topbar div > ul
+.topbar div > ul, .nav {
+  display: block;
+  float: left;
+  margin: 0 10px 0 0;
+  position: relative;
+  left: 0;
+  > li {
+    display: block;
+    float: left;
+  }
+  a {
+    display: block;
+    float: none;
+    padding: 10px 10px 11px;
+    line-height: 19px;
+    text-decoration: none;
+    &:hover {
+      color: $white;
+      text-decoration: none;
+    }
+  }
+  .active > a {
+    background-color: #222;
+    background-color: rgba(0,0,0,.5);
+  }
+
+  // Secondary (floated right) nav in topbar
+  &.secondary-nav {
+    float: right;
+    margin-left: 10px;
+    margin-right: 0;
+    // backwards compatibility
+    .menu-dropdown, .dropdown-menu {
+      right: 0;
+      border: 0;
+    }
+  }
+  // Dropdowns within the .nav
+  // a.menu:hover and li.open .menu for backwards compatibility
+  a.menu:hover, li.open .menu, .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
+    background: #444;
+    background: rgba(255,255,255,.05);
+  }
+  // .menu-dropdown for backwards compatibility
+  .menu-dropdown, .dropdown-menu {
+    background-color: #333;
+    // a.menu for backwards compatibility
+    a.menu, .dropdown-toggle {
+      color: $white;
+      &.open {
+        background: #444;
+        background: rgba(255,255,255,.05);
+      }
+    }
+    li a {
+      color: #999;
+      text-shadow: 0 1px 0 rgba(0,0,0,.5);
+      &:hover {
+        @include vertical-gradient(#292929,#191919);
+        color: $white;
+      }
+    }
+    .active a {
+      color: $white;
+    }
+    .divider {
+      background-color: #222;
+      border-color: #444;
+    }
+  }
+}
+
+// For backwards compatibility with new dropdowns, redeclare dropdown link padding
+.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
+  padding: 4px 15px;
+}
+
+// Dropdown Menus
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+// li.menu for backwards compatibility
+li.menu, .dropdown {
+  position: relative;
+}
+// The link that is clicked to toggle the dropdown
+// a.menu for backwards compatibility
+a.menu:after, .dropdown-toggle:after {
+  width: 0;
+  height: 0;
+  display: inline-block;
+  content: "&darr;";
+  text-indent: -99999px;
+  vertical-align: top;
+  margin-top: 8px;
+  margin-left: 4px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid $white;
+  @include opacity(50);
+}
+// The dropdown menu (ul)
+// .menu-dropdown for backwards compatibility
+.menu-dropdown, .dropdown-menu {
+  background-color: $white;
+  float: left;
+  display: none; // None by default, but block on "open" of the menu
+  position: absolute;
+  top: 40px;
+  z-index: 900;
+  min-width: 160px;
+  max-width: 220px;
+  _width: 160px;
+  margin-left: 0; // override default ul styles
+  margin-right: 0;
+  padding: 6px 0;
+  zoom: 1; // do we need this?
+  border-color: #999;
+  border-color: rgba(0,0,0,.2);
+  border-style: solid;
+  border-width: 0 1px 1px;
+  @include border-radius(0 0 6px 6px);
+  @include box-shadow(0 2px 4px rgba(0,0,0,.2));
+  @include background-clip(padding-box);
+
+  // Unfloat any li's to make them stack
+  li {
+    float: none;
+    display: block;
+    background-color: none;
+  }
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    height: 1px;
+    margin: 5px 0;
+    overflow: hidden;
+    background-color: #eee;
+    border-bottom: 1px solid $white;
+  }
+}
+
+.topbar .dropdown-menu, .dropdown-menu {
+  // Links within the dropdown menu
+  a {
+    display: block;
+    padding: 4px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: 18px;
+    color: $gray;
+    text-shadow: 0 1px 0 $white;
+    // Hover state
+    &:hover {
+      @include vertical-gradient(#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);
+      @include box-shadow($shadow);
+    }
+  }
+}
+
+// Open state for the dropdown
+// .open for backwards compatibility
+.open, .dropdown.open {
+  // .menu for backwards compatibility
+  .menu, .dropdown-toggle {
+    color: $white;
+    background: #ccc;
+    background: rgba(0,0,0,.3);
+  }
+  // .menu-dropdown for backwards compatibility
+  .menu-dropdown, .dropdown-menu {
+    display: block;
+  }
+}
+
+// Tabs and Pills
+.tabs, .pills {
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+  @include clearfix();
+  > li {
+    float: left;
+    > a {
+      display: block;
+    }
+  }
+}
+
+// Basic Tabs
+.tabs {
+  float: left;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  > li {
+    position: relative; // For the dropdowns mostly
+    top: 1px;
+    > a {
+      padding: 0 15px;
+      margin-right: 2px;
+      line-height: $baseline * 2;
+      border: 1px solid transparent;
+      @include border-radius(4px 4px 0 0);
+      &:hover {
+        text-decoration: none;
+        background-color: #eee;
+        border-color: #eee #eee #ddd;
+      }
+    }
+    &.active > a {
+      color: $gray;
+      background-color: $white;
+      border: 1px solid #ddd;
+      border-bottom-color: transparent;
+    }
+  }
+  // first one for backwards compatibility
+  .menu-dropdown, .dropdown-menu {
+    top: 35px;
+    border-width: 1px;
+    @include border-radius(0 6px 6px 6px);
+  }
+  // first one for backwards compatibility
+  a.menu:after, .dropdown-toggle:after {
+    border-top-color: #999;
+    margin-top: 15px;
+    margin-left: 5px;
+  }
+  // first one for backwards compatibility
+  li.open.menu .menu, .open.dropdown .dropdown-toggle {
+    border-color: #999;
+  }
+  // first one for backwards compatibility
+  li.open a.menu:after, .dropdown.open .dropdown-toggle:after {
+    border-top-color: #555;
+  }
+}
+.tab-content {
+  clear: both;
+}
+
+// Basic pill nav
+.pills {
+  a {
+      margin: 5px 3px 5px 0;
+    padding: 0 15px;
+    text-shadow: 0 1px 1px $white;
+    line-height: 30px;
+    @include border-radius(15px);
+    &:hover {
+      background: $linkColorHover;
+      color: $white;
+      text-decoration: none;
+      text-shadow: 0 1px 1px rgba(0,0,0,.25);
+    }
+  }
+  .active a {
+    background: $linkColor;
+    color: $white;
+    text-shadow: 0 1px 1px rgba(0,0,0,.25);
+  }
+}
+
+.tab-content > *, .pill-content > * {
+  display: none;
+}
+
+.tab-content > .active, .pill-content > .active {
+  display:block;
+}
+
+// BREADCRUMBS
+// -----------
+
+.breadcrumb {
+  margin: 0 0 $baseline;
+  padding: 7px 14px;
+  @include vertical-gradient(#ffffff, #f5f5f5);
+  border: 1px solid #ddd;
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 0 $white);
+  li {
+    display: inline;
+    text-shadow: 0 1px 0 $white;
+  }
+  .divider {
+    padding: 0 5px;
+    color: $grayLight;
+  }
+  a {
+  }
+  .active a {
+    color: $grayDark;
+  }
+}
+
+
+// PAGE HEADERS
+// ------------
+
+.hero-unit {
+  background-color: #f5f5f5;
+  margin-bottom: 30px;
+  padding: 60px;
+  @include border-radius(6px);
+  h1 {
+    margin-bottom: 0;
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+  p {
+    font-size: 18px;
+    font-weight: 200;
+    line-height: $baseline * 1.5;
+  }
+}
+footer {
+  margin-top: $baseline - 1;
+  padding-top: $baseline - 1;
+  border-top: 1px solid #eee;
+}
+
+
+// PAGE HEADERS
+// ------------
+
+.page-header {
+  margin-bottom: $baseline - 1;
+  border-bottom: 1px solid #ddd;
+  @include box-shadow(0 1px 0 rgba(255,255,255,.5));
+  h1 {
+    margin-bottom: ($baseline / 2) - 1px;
+  }
+}
+
+
+// BUTTON STYLES
+// -------------
+
+// Shared colors for buttons and alerts
+.btn, .alert-message {
+  // Set text color
+  &.danger, &.danger:hover, &.error, &.error:hover, &.success, &.success:hover, &.info, &.info:hover {
+    color: $white
+  }
+  // Danger and error appear as red
+  &.danger, &.error {
+    @include gradientBar(#ff6161, #be0006);
+  }
+  // Success appears as green
+  &.success {
+    @include gradientBar(#43da62, #02901f);
+  }
+  // Info appears as orange
+  &.info {
+    @include gradientBar(#ffa76a, #da5800);
+  }
+}
+
+// Base .btn styles
+.btn {
+  // Button Base
+  cursor: pointer;
+  display: inline-block;
+  @include vertical-three-colors-gradient(#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,1.0);
+  color: #555;
+  font-size: $basefont;
+  font-weight: bold;
+  line-height: normal;
+  border: 1px solid #AAA;
+  border-bottom-color: #999;
+  @include border-radius(5px);
+  $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  @include box-shadow($shadow);
+
+  &:hover {
+    background-position: 0 -15px;
+    color: #333;
+    text-decoration: none;
+  }
+
+  // Focus state for keyboard and accessibility
+  &:focus {
+    outline: 1px dotted #666;
+  }
+
+  // Primary Button Type
+  &.primary {
+    color: $white;
+    @include gradientBar($blue, $blueDark)
+  }
+
+   // Transitions
+  @include transition(.1s linear all);
+
+  // Active and Disabled states
+  &:active {
+    $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+    @include box-shadow($shadow);
+  }
+  &.disabled {
+    cursor: default;
+    background-image: none;
+    @include reset-filter();
+    @include opacity(65);
+    @include box-shadow(none);
+  }
+  &[disabled] {
+    // disabled pseudo can't be included with .disabled
+    // def because IE8 and below will drop it ;_;
+    cursor: default;
+    background-image: none;
+    @include reset-filter();
+    @include opacity(65);
+    @include box-shadow(none);
+  }
+
+  // Button Sizes
+  &.large {
+    font-size: $basefont + 2px;
+    line-height: normal;
+    padding: 9px 14px 9px;
+    @include border-radius(6px);
+  }
+  &.small {
+    padding: 7px 9px 7px;
+    font-size: $basefont - 2px;
+  }
+}
+// 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;
+}
+
+// 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;
+  }
+}
+
+
+// CLOSE ICONS
+// -----------
+.close {
+  float: right;
+  color: $black;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: $baseline * .75;
+  text-shadow: 0 1px 0 rgba(255,255,255,1);
+  @include opacity(20);
+  &:hover {
+    color: $black;
+    text-decoration: none;
+    @include opacity(40);
+  }
+}
+
+
+// ERROR STYLES
+// ------------
+
+// Base alert styles
+.alert-message {
+  position: relative;
+  padding: 7px 15px;
+  margin-bottom: $baseline;
+  color: $grayDark;
+  @include gradientBar(#fceec1, #eedc94); // warning by default
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  border-width: 1px;
+  border-style: solid;
+  @include border-radius(4px);
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
+
+  // Adjust close icon
+  .close {
+    *margin-top: 3px; /* IE7 spacing */
+  }
+
+  // Remove extra margin from content
+  h5 {
+    line-height: $baseline;
+  }
+  p {
+    margin-bottom: 0;
+  }
+  div {
+    margin-top: 5px;
+    margin-bottom: 2px;
+    line-height: 28px;
+  }
+  .btn {
+    // Provide actions with buttons
+    @include box-shadow(0 1px 0 rgba(255,255,255,.25));
+  }
+
+  &.block-message {
+    background-image: none;
+    background-color: lighten(#fceec1, 5%);
+    @include reset-filter();
+    padding: 14px;
+    border-color: #fceec1;
+    @include box-shadow(none);
+    ul, p {
+      margin-right: 30px;
+    }
+    ul {
+      margin-bottom: 0;
+    }
+    li {
+      color: $grayDark;
+    }
+    .alert-actions {
+      margin-top: 5px;
+    }
+    &.error, &.success, &.info {
+      color: $grayDark;
+      text-shadow: 0 1px 0 rgba(255,255,255,.5);
+    }
+    &.error {
+      background-color: lighten(#f56a66, 25%);
+      border-color: lighten(#f56a66, 20%);
+    }
+    &.success {
+      background-color: lighten(#62c462, 30%);
+      border-color: lighten(#62c462, 25%);
+    }
+    &.info {
+      background-color: lighten(#6bd0ee, 25%);
+      border-color: lighten(#6bd0ee, 20%);
+    }
+  }
+}
+
+
+// PAGINATION
+// ----------
+
+.pagination {
+  height: $baseline * 2;
+  margin: $baseline 0;
+  ul {
+    float: left;
+    margin: 0;
+    border: 1px solid #ddd;
+    border: 1px solid rgba(0,0,0,.15);
+    @include border-radius(3px);
+    @include box-shadow(0 1px 2px rgba(0,0,0,.05));
+  }
+  li {
+    display: inline;
+  }
+  a {
+    float: left;
+    padding: 0 14px;
+    line-height: ($baseline * 2) - 2;
+    border-right: 1px solid;
+    border-right-color: #ddd;
+    border-right-color: rgba(0,0,0,.15);
+    *border-right-color: #ddd; /* IE6-7 */
+    text-decoration: none;
+  }
+  a:hover, .active a {
+    background-color: lighten($blue, 45%);
+  }
+  .disabled a, .disabled a:hover {
+    background-color: transparent;
+    color: $grayLight;
+  }
+  .next a {
+    border: 0;
+  }
+}
+
+
+// WELLS
+// -----
+
+.well {
+  background-color: #f5f5f5;
+  margin-bottom: 20px;
+  padding: 19px;
+  min-height: 20px;
+  border: 1px solid #eee;
+  border: 1px solid rgba(0,0,0,.05);
+  @include border-radius(4px);
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
+}
+
+
+// MODALS
+// ------
+
+.modal-backdrop {
+  background-color: $black;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+}
+
+.modal-backdrop, .modal-backdrop.fade.in {
+  @include opacity(80);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 11000;
+  width: 560px;
+  margin: -250px 0 0 -250px;
+  background-color: $white;
+  border: 1px solid #999;
+  border: 1px solid rgba(0,0,0,.3);
+  *border: 1px solid #999; /* IE6-7 */
+  @include border-radius(6px);
+  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include background-clip(padding-box);
+  .close { margin-top: 7px; }
+  &.fade {
+    $trans: opacity .3s linear, top .3s ease-out;
+    @include transition($trans);
+    top: -25%;
+  }
+  &.fade.in { top: 50%; }
+}
+.modal-header {
+  border-bottom: 1px solid #eee;
+  padding: 5px 15px;
+}
+.modal-body {
+  padding: 15px;
+}
+.modal-footer {
+  background-color: #f5f5f5;
+  padding: 14px 15px 15px;
+  border-top: 1px solid #ddd;
+  @include border-radius(0 0 6px 6px);
+  @include box-shadow(inset 0 1px 0 $white);
+  @include clearfix();
+  margin-bottom: 0;
+  .btn {
+    float: right;
+    margin-left: 5px;
+  }
+}
+
+
+// POPOVER ARROWS
+// --------------
+
+@mixin above-arrow($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-arrow($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-arrow($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-arrow($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
+// ------
+
+.twipsy {
+  display: block;
+  position: absolute;
+  visibility: visible;
+  padding: 5px;
+  font-size: 11px;
+  z-index: 1000;
+  @include opacity(80);
+  &.fade.in {
+    @include opacity(80);
+  }
+  &.above .twipsy-arrow   { @include above-arrow(); }
+  &.left .twipsy-arrow    { @include left-arrow(); }
+  &.below .twipsy-arrow   { @include below-arrow(); }
+  &.right .twipsy-arrow   { @include right-arrow(); }
+}
+.twipsy-inner {
+  padding: 3px 8px;
+  background-color: $black;
+  color: white;
+  text-align: center;
+  max-width: 200px;
+  text-decoration: none;
+  @include border-radius(4px);
+}
+.twipsy-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+
+// POPOVERS
+// --------
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 5px;
+  display: none;
+  &.above .arrow { @include above-arrow(); }
+  &.right .arrow { @include right-arrow(); }
+  &.below .arrow { @include below-arrow(); }
+  &.left .arrow  { @include left-arrow(); }
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  .inner {
+    background-color: $black;
+    background-color: rgba(0,0,0,.8);
+    padding: 3px;
+    overflow: hidden;
+    width: 280px;
+    @include border-radius(6px);
+    @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  }
+  .title {
+    background-color: #f5f5f5;
+    padding: 9px 15px;
+    line-height: 1;
+    @include border-radius(3px 3px 0 0);
+    border-bottom:1px solid #eee;
+  }
+  .content {
+    background-color: $white;
+    padding: 14px;
+    @include border-radius(0 0 3px 3px);
+    @include background-clip(padding-box);
+    p, ul, ol {
+      margin-bottom: 0;
+    }
+  }
+}
+
+
+// PATTERN ANIMATIONS
+// ------------------
+
+.fade {
+  @include transition(opacity .15s linear);
+  opacity: 0;
+  &.in {
+    opacity: 1;
+  }
+}
+
+// LABELS
+// ------
+
+.label {
+  padding: 1px 3px 2px;
+  background-color: $grayLight;
+  font-size: $basefont * .75;
+  font-weight: bold;
+  color: $white;
+  text-transform: uppercase;
+  @include border-radius(3px);
+  &.important { background-color: #c43c35; }
+  &.warning   { background-color: $orange; }
+  &.success   { background-color: $green; }
+  &.notice    { background-color: lighten($blue, 25%); }
+}
+
+
+// MEDIA GRIDS
+// -----------
+
+.media-grid {
+  margin-left: -20px;
+  margin-bottom: 0;
+  @include clearfix();
+  li {
+    display: inline;
+  }
+  a {
+    float: left;
+    padding: 4px;
+    margin: 0 0 20px 20px;
+    border: 1px solid #ddd;
+    @include border-radius(4px);
+    @include box-shadow(0 1px 1px rgba(0,0,0,.075));
+    img {
+      display: block;
+    }
+    &:hover {
+      border-color: $linkColor;
+      @include box-shadow(0 1px 4px rgba(0,105,214,.25));
+    }
+  }
+}