frontend 0.0.1

data/vendor/assets/stylesheets/bootstrap.css.scss

@@ -0,0 +1,2 @@
+@import 'bootstrap/preboot';
+@import 'bootstrap/bootstrap';

data/vendor/assets/stylesheets/bootstrap/bootstrap.scss

@@ -0,0 +1,25 @@
+/*!
+ * Bootstrap v1.1.1
+ *
+ * Copyright 2011 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ *
+ * Converted to Sass by @johnwlong.
+ *
+ * Date: @DATE
+ */
+
+// CSS Reset
+@import "reset";
+
+// Core
+@import "scaffolding";
+
+// Styled patterns and elements
+@import "type";
+@import "forms";
+@import "tables";
+@import "patterns";

data/vendor/assets/stylesheets/bootstrap/forms.css.scss

@@ -0,0 +1,368 @@
+/* Forms.scss
+ * Base styles for various input types, form layouts, and states
+ * ------------------------------------------------------------- */
+
+// FORM STYLES
+// -----------
+
+form {
+  margin-bottom: $baseline;
+}
+
+// Groups of fields with labels on top (legends)
+fieldset {
+  margin-bottom: $baseline;
+  padding-top: $baseline;
+  legend {
+    display: block;
+    margin-left: 150px;
+    font-size: 20px;
+    line-height: 1;
+    *margin: 0 0 5px 145px; /* IE6-7 */
+    *line-height: 1.5; /* IE6-7 */
+    color: $grayDark;
+  }
+}
+
+// Parent element that clears floats and wraps labels and fields together
+.clearfix {
+  margin-bottom: $baseline;
+}
+
+// Set font for forms
+label,
+input,
+select,
+textarea {
+  @include sans-serif-font(normal,13px,normal);
+}
+
+// Float labels left
+label {
+  padding-top: 6px;
+  font-size: 13px;
+  line-height: 18px;
+  float: left;
+  width: 130px;
+  text-align: right;
+  color: $grayDark;
+}
+
+// Shift over the inside div to align all label's relevant content
+div.input {
+  margin-left: 150px;
+}
+
+// Checkboxs and radio buttons
+input[type=checkbox],
+input[type=radio] {
+  cursor: pointer;
+}
+
+// Inputs, Textareas, Selects
+input[type=text],
+input[type=password],
+textarea,
+select,
+.uneditable-input {
+  display: inline-block;
+  width: 210px;
+  padding: 4px;
+  font-size: 13px;
+  line-height: $baseline;
+  height: $baseline;
+  color: $gray;
+  border: 1px solid #ccc;
+  @include border-radius(3px);
+}
+select,
+input[type=file] {
+  height: $baseline * 1.5;
+  line-height: $baseline * 1.5;
+}
+textarea {
+  height: auto;
+}
+.uneditable-input {
+  background-color: #eee;
+  display: block;
+  border-color: #ccc;
+  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+:-moz-placeholder {
+  color: $grayLight;
+}
+::-webkit-input-placeholder {
+  color: $grayLight;
+}
+
+// Focus states
+input[type=text],
+input[type=password],
+select, textarea {
+  $transition: border linear .2s, box-shadow linear .2s;
+  @include transition($transition);
+  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+}
+input[type=text]:focus,
+input[type=password]:focus,
+textarea:focus {
+  outline: none;
+  border-color: rgba(82,168,236,.8);
+  $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+  @include box-shadow($shadow);
+}
+
+// Error styles
+form div.error {
+  background: lighten($red, 57%);
+  padding: 10px 0;
+  margin: -10px 0 10px;
+  @include border-radius(4px);
+  $error-text: desaturate(lighten($red, 25%), 25%);
+  > label,
+  span.help-inline,
+  span.help-block {
+    color: $red;
+  }
+  input[type=text],
+  input[type=password],
+  textarea {
+    border-color: $error-text;
+    @include box-shadow(0 0 3px rgba(171,41,32,.25));
+    &:focus {
+      border-color: darken($error-text, 10%);
+      @include box-shadow(0 0 6px rgba(171,41,32,.5));
+    }
+  }
+  .input-prepend,
+  .input-append {
+    span.add-on {
+      background: lighten($red, 50%);
+      border-color: $error-text;
+      color: darken($error-text, 10%);
+    }
+  }
+}
+
+// Form element sizes
+.input-mini, input.mini, textarea.mini, select.mini {
+  width: 60px;
+}
+.input-small, input.small, textarea.small, select.small {
+  width: 90px;
+}
+.input-medium, input.medium, textarea.medium, select.medium {
+  width: 150px;
+}
+.input-large, input.large, textarea.large, select.large {
+  width: 210px;
+}
+.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
+  width: 270px;
+}
+.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
+  width: 530px;
+}
+textarea.xxlarge {
+  overflow-y: scroll;
+}
+
+// Turn off focus for disabled (read-only) form elements
+input[readonly]:focus,
+textarea[readonly]:focus,
+input.disabled {
+  background: #f5f5f5;
+  border-color: #ddd;
+  @include box-shadow(none);
+}
+
+// Actions (the buttons)
+.actions {
+  background: #f5f5f5;
+  margin-top: $baseline;
+  margin-bottom: $baseline;
+  padding: ($baseline - 1) 20px $baseline 150px;
+  border-top: 1px solid #ddd;
+  @include border-radius(0 0 3px 3px);
+  .secondary-action {
+    float: right;
+    a {
+      line-height: 30px;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// Help Text
+.help-inline,
+.help-block {
+  font-size: 12px;
+  line-height: $baseline;
+  color: $grayLight;
+}
+.help-inline {
+  padding-left: 5px;
+  *position: relative; /* IE6-7 */
+  *top: -5px; /* IE6-7 */
+}
+
+// Big blocks of help text
+.help-block {
+  display: block;
+  max-width: 600px;
+}
+
+// Inline Fields (input fields that appear as inline objects
+.inline-inputs {
+  color: $gray;
+  span, input[type=text] {
+    display: inline-block;
+  }
+  input.mini {
+    width: 60px;
+  }
+  input.small {
+    width: 90px;
+  }
+  span {
+    padding: 0 2px 0 1px;
+  }
+}
+
+// Allow us to put symbols and text within the input field for a cleaner look
+.input-prepend,
+.input-append {
+  input[type=text],
+  input[type=password] {
+    @include border-radius(0 3px 3px 0);
+  }
+  .add-on {
+    background: #f5f5f5;
+    float: left;
+    display: block;
+    width: auto;
+    min-width: 16px;
+    padding: 4px 4px 4px 5px;
+    color: $grayLight;
+    font-weight: normal;
+    line-height: 18px;
+    height: 18px;
+    text-align: center;
+    text-shadow: 0 1px 0 #fff;
+    border: 1px solid #ccc;
+    border-right-width: 0;
+    @include border-radius(3px 0 0 3px);
+  }
+  .active {
+    background: lighten($green, 30);
+    border-color: $green;
+  }
+}
+.input-prepend {
+  .add-on {
+    *margin-top: 1px; /* IE6-7 */
+  }
+}
+.input-append {
+  input[type=text],
+  input[type=password] {
+    float: left;
+    @include border-radius(3px 0 0 3px);
+  }
+  .add-on {
+    @include border-radius(0 3px 3px 0);
+    border-right-width: 1px;
+    border-left-width: 0;
+  }
+}
+
+// Stacked options for forms (radio buttons or checkboxes)
+.inputs-list {
+  margin: 0 0 5px;
+  width: 100%;
+  li {
+    display: block;
+    padding: 0;
+    width: 100%;
+    label {
+      display: block;
+      float: none;
+      width: auto;
+      padding: 0;
+      line-height: $baseline;
+      text-align: left;
+      white-space: normal;
+      strong {
+        color: $gray;
+      }
+      small {
+        font-size: 12px;
+        font-weight: normal;
+      }
+    }
+    ul.inputs-list {
+      margin-left: 25px;
+      margin-bottom: 10px;
+      padding-top: 0;
+    }
+    &:first-child {
+      padding-top: 5px;
+    }
+  }
+  input[type=radio],
+  input[type=checkbox] {
+    margin-bottom: 0;
+  }
+}
+
+// Stacked forms
+.form-stacked {
+  padding-left: 20px;
+  fieldset {
+    padding-top: $baseline / 2;
+  }
+  legend {
+    margin-left: 0;
+  }
+  label {
+    display: block;
+    float: none;
+    width: auto;
+    font-weight: bold;
+    text-align: left;
+    line-height: 20px;
+    padding-top: 0;
+  }
+  .clearfix {
+    margin-bottom: $baseline / 2;
+    div.input {
+      margin-left: 0;
+    }
+  }
+  .inputs-list {
+    margin-bottom: 0;
+    li {
+      padding-top: 0;
+      label {
+        font-weight: normal;
+        padding-top: 0;
+      }
+    }
+  }
+  div.error {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    margin-top: 0;
+    margin-left: -10px;
+  }
+  .actions {
+    margin-left: -20px;
+    padding-left: 20px;
+  }
+}

data/vendor/assets/stylesheets/bootstrap/patterns.scss

@@ -0,0 +1,769 @@
+
+/* Patterns.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;
+
+  // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+  .fill {
+    background:#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);
+  }
+
+  // Links get text shadow
+  a {
+    color: $grayLight;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  }
+
+  // Hover and active states
+  a:hover,
+  ul li.active a {
+    background-color: #333;
+    background-color: rgba(255,255,255,.05);
+    color: $white;
+    text-decoration: none;
+  }
+
+  // Website name
+  h3 {
+    position:relative;
+    a {
+      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;
+    }
+  }
+
+  // Search Form
+  form {
+    float: left;
+    margin: 5px 0 0 0;
+    position: relative;
+    @include opacity(100);
+    input {
+      background-color: #444;
+      background-color: rgba(255,255,255,.3);
+      @include sans-serif-font(13px, normal, 1);
+      width: 220px;
+      padding: 4px 9px;
+      color: #fff;
+      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: #fff;
+      }
+      // Focus states (we use .focused since IE8 and down doesn't support :focus)
+      &:focus,
+      &.focused {
+        outline: none;
+        background-color: #fff;
+        color: $grayDark;
+        text-shadow: 0 1px 0 #fff;
+        border: 0;
+        padding: 5px 10px;
+        @include box-shadow(0 0 3px rgba(0,0,0,.15));
+      }
+    }
+  }
+
+  // Navigation
+  ul {
+    display: block;
+    float: left;
+    margin: 0 10px 0 0;
+    position: relative;
+    &.secondary-nav {
+      float: right;
+      margin-left: 10px;
+      margin-right: 0;
+    }
+    li {
+      display: block;
+      float: left;
+      font-size: 13px;
+      a {
+        display: block;
+        float: none;
+        padding: 10px 10px 11px;
+        line-height: 19px;
+        text-decoration: none;
+        &:hover {
+          color: #fff;
+          text-decoration: none;
+        }
+      }
+      &.active a {
+        background-color: #222;
+        background-color: rgba(0,0,0,.5);
+      }
+    }
+
+    // Dropdowns
+    &.primary-nav li ul {
+      left: 0;
+    }
+    &.secondary-nav li ul {
+      right: 0;
+    }
+    li.menu {
+      position: relative;
+      a.menu {
+        &:after {
+          width: 0px;
+          height: 0px;
+          display: inline-block;
+          content: "↓";
+          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 #fff;
+          @include opacity(50);
+        }
+      }
+      &.open {
+        a.menu,
+        a:hover {
+          background-color: #444;
+          background-color: rgba(255,255,255,.1);
+          *background-color: #444; /* IE6-7 */
+          color: #fff;
+        }
+        ul {
+          display: block;
+          li {
+            a {
+              background-color: transparent;
+              font-weight: normal;
+              &:hover {
+                background-color: rgba(255,255,255,.1);
+                *background-color: #444; /* IE6-7 */
+                color: #fff;
+              }
+            }
+            &.active a {
+              background-color: rgba(255,255,255,.1);
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+    li ul {
+      background-color: #333;
+      float: left;
+      display: none;
+      position: absolute;
+      top: 40px;
+      min-width: 160px;
+      max-width: 220px;
+      _width: 160px;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
+      text-align: left;
+      border: 0;
+      zoom: 1;
+      @include border-radius(0 0 5px 5px);
+      @include box-shadow(0 1px 2px rgba(0,0,0,0.6));
+      li {
+        float: none;
+        clear: both;
+        display: block;
+        background: none;
+        font-size: 12px;
+        a {
+          display: block;
+          padding: 6px 15px;
+          clear: both;
+          font-weight: normal;
+          line-height: 19px;
+          color: #bbb;
+          &:hover {
+            background-color: #333;
+            background-color: rgba(255,255,255,.25);
+            color: #fff;
+          }
+        }
+
+        // Dividers (basically an hr)
+        &.divider {
+          height: 1px;
+          overflow: hidden;
+          background: #222;
+          background: rgba(0,0,0,.2);
+          border-bottom: 1px solid rgba(255,255,255,.1);
+          margin: 5px 0;
+        }
+
+        // Section separaters
+        span {
+          clear: both;
+          display: block;
+          background: rgba(0,0,0,.2);
+          padding: 6px 15px;
+          cursor: default;
+          color: $gray;
+          border-top: 1px solid rgba(0,0,0,.2);
+        }
+      }
+    }
+  }
+}
+
+
+// PAGE HEADERS
+// ------------
+
+.hero-unit {
+  background-color: #f5f5f5;
+  margin-top: 60px;
+  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
+// -------------
+
+@mixin btnColor($primaryColor, $secondaryColor) {
+  @include vertical-gradient($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) fade-in(rgba(0,0,0,.1), .15);
+}
+
+
+// Base .btn styles
+.btn {
+  // Button Base
+  cursor: pointer;
+  display: inline-block;
+  @include vertical-three-colors-gradient(#fff, #fff, 0.25, darken(#fff, 10%));
+  padding: 5px 14px 6px;
+  text-shadow: 0 1px 1px rgba(255,255,255,.75);
+  color: #333;
+  font-size: 13px;
+  line-height: normal;
+  border: 1px solid #ccc;
+  border-bottom-color: #bbb;
+  @include border-radius(4px);
+  $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;
+  }
+
+  // Primary Button Type
+  &.primary {
+    color:#fff;
+    @include btnColor($blue, $blueDark);
+  }
+
+   // Transitions
+  @include transition(.1s linear all);
+
+  // Active and Disabled states
+  &.disabled {
+    cursor: default;
+    background-image: none;
+    @include opacity(65);
+  }
+
+  &:disabled {
+    // disabled pseudo can't be included with .disabled
+    // def because IE8 and below will drop it ;_;
+    cursor: default;
+    background-image: none;
+    @include opacity(65);
+  }
+
+  &:active {
+    $shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
+    @include box-shadow($shadow);
+  }
+
+  // Button Sizes
+  &.large {
+    font-size: 16px;
+    line-height: normal;
+    padding: 9px 14px 9px;
+    @include border-radius(6px);
+  }
+
+  &.small {
+    padding: 7px 9px 7px;
+    font-size: 11px;
+  }
+
+}
+
+// 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;
+  }
+}
+
+
+
+// ERROR STYLES
+// ------------
+
+// Base alert styles
+.alert-message {
+  @include btnColor(#fceec1, #eedc94);
+  margin-bottom: $baseline;
+  padding: 7px 14px;
+  color: $grayDark;
+  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));
+
+  // 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));
+  }
+  .close {
+    float: right;
+    margin-top: -2px;
+    color: $black;
+    font-size: 20px;
+    font-weight: bold;
+    text-shadow: 0 1px 0 rgba(255,255,255,1);
+    @include opacity(20);
+    &:hover {
+      color: $black;
+      text-decoration: none;
+      @include opacity(40);
+    }
+  }
+
+  &.block-message {
+    background-image: none;
+    background-color: lighten(#fceec1, 5%);
+    padding: 14px;
+    border-color: #fceec1;
+    @include box-shadow(none);
+
+    p {
+      margin-right: 30px;
+    }
+    .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%);
+    }
+  }
+}
+
+// NAVIGATION
+// ----------
+
+// Common tab and pill styles
+.tabs,
+.pills {
+  margin: 0 0 20px;
+  padding: 0;
+  @include clearfix();
+  li {
+    display: inline;
+    a {
+      float: left;
+      width: auto;
+    }
+  }
+}
+
+// Basic Tabs
+.tabs {
+  width: 100%;
+  border-bottom: 1px solid $grayLight;
+  li {
+    a {
+      margin-bottom: -1px;
+      margin-right: 2px;
+      padding: 0 15px;
+      line-height: ($baseline * 2) - 1;
+      @include border-radius(3px 3px 0 0);
+      &:hover {
+        background-color: $grayLighter;
+        border-bottom: 1px solid $grayLight;
+      }
+    }
+    &.active a {
+      background-color: #fff;
+      padding: 0 14px;
+      border: 1px solid #ccc;
+      border-bottom: 0;
+      color: $gray;
+    }
+  }
+}
+
+// Basic pill nav
+.pills {
+  li {
+    a {
+      margin: 5px 3px 5px 0;
+      padding: 0 15px;
+      text-shadow: 0 1px 1px #fff;
+      line-height: 30px;
+      @include border-radius(15px);
+      &:hover {
+        background: $linkColorHover;
+        color: #fff;
+        text-decoration: none;
+        text-shadow: 0 1px 1px rgba(0,0,0,.25);
+      }
+    }
+    &.active a {
+      background: $linkColor;
+      color: #fff;
+      text-shadow: 0 1px 1px rgba(0,0,0,.25);
+    }
+  }
+}
+
+
+// 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));
+}
+
+
+// MODALS
+// ------
+
+.modal-backdrop {
+  background-color: rgba(0,0,0,.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+}
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 2000;
+  width: 560px;
+  margin: -280px 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);
+  .modal-header {
+    border-bottom: 1px solid #eee;
+    padding: 5px 20px;
+    .close {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      color: #999;
+      line-height:10px;
+      font-size: 18px;
+    }
+  }
+  .modal-body {
+    padding: 20px;
+  }
+  .modal-footer {
+    background-color: #f5f5f5;
+    padding: 14px 20px 15px;
+    border-top: 1px solid #ddd;
+    @include border-radius(0 0 6px 6px);
+    @include box-shadow(inset 0 1px 0 #fff);
+    @include clearfix();
+    margin-bottom: 0;
+    .btn {
+      float: right;
+      margin-left: 10px;
+    }
+  }
+}
+
+
+// POPOVER ARROWS
+// --------------
+
+@mixin popover-arrow-above($arrowWidth: 5px) {
+  bottom: 0;
+  left: 50%;
+  margin-left: -$arrowWidth;
+  border-left: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid transparent;
+  border-top: $arrowWidth solid #000;
+}
+
+@mixin popover-arrow-left($arrowWidth: 5px) {
+  top: 50%;
+  right: 0;
+  margin-top: -$arrowWidth;
+  border-top: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid transparent;
+  border-left: $arrowWidth solid #000;
+}
+
+@mixin popover-arrow-below($arrowWidth: 5px) {
+  top: 0;
+  left: 50%;
+  margin-left: -$arrowWidth;
+  border-left: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid #000;
+}
+
+@mixin popover-arrow-right($arrowWidth: 5px) {
+  top: 50%;
+  left: 0;
+  margin-top: -$arrowWidth;
+  border-top: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid #000;
+}
+
+
+// TWIPSY
+// ------
+
+.twipsy {
+  display: block;
+  position: absolute;
+  visibility: visible;
+  padding: 5px;
+  font-size: 11px;
+  z-index: 1000;
+  @include opacity(80);
+  &.above .twipsy-arrow   { @include popover-arrow-above(); }
+  &.left .twipsy-arrow    { @include popover-arrow-left(); }
+  &.below .twipsy-arrow   { @include popover-arrow-below(); }
+  &.right .twipsy-arrow   { @include popover-arrow-right(); }
+  .twipsy-inner {
+    padding: 3px 8px;
+    background-color: #000;
+    color: white;
+    text-align: center;
+    max-width: 200px;
+    text-decoration: none;
+    @include border-radius(4px);
+  }
+  .twipsy-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+}
+
+
+// Background clipping
+@mixin background-clip($clip) {
+  -webkit-background-clip: $clip;
+  -moz-background-clip: $clip;
+  background-clip: $clip;
+}
+
+
+// POPOVERS
+// --------
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 5px;
+  display: none;
+  &.above .arrow { @include popover-arrow-above(); }
+  &.right .arrow { @include popover-arrow-right(); }
+  &.below .arrow { @include popover-arrow-below(); }
+  &.left .arrow  { @include popover-arrow-left(); }
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  .inner {
+    background-color: #333;
+    background-color: rgba(0,0,0,.8);
+    *background-color: #333; /* IE 6-7 */
+    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;
+    }
+  }
+}