Lavish - Generate your own Bootstrap color scheme

Step 3: Get the code

CSS

LESS


//
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------

// Links
@linkColor:             #6E6352;
@linkColorHover:        darken(@linkColor, 15%);

// Grays
@black:                 #131415;
@grayDark:              #4D4137; 
@grayDarker:            darken(@grayDark, 10%);
@gray:                  #8A7056;
@grayLight:             #AC8F6A;
@grayLighter:           #BEBBAF;
@white:                 #DEE7EE;

// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;


// Scaffolding
// -------------------------
@bodyBackground:        @white;
@textColor:             @grayDark;

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor


// Tables
// -------------------------
@tableBackground:                   transparent; // overall background-color
@tableBackgroundAccent:             #f9f9f9; // for striping
@tableBackgroundHover:              #f5f5f5; // for hover
@tableBorder:                       @grayDark; // table and cell border


// Buttons
// -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
@btnBorder:                         #bbb;

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:     @grayDarker;


// Forms
// -------------------------
@inputBackground:               #fff;
@inputBorder:                   #ccc;
@inputBorderRadius:             3px;
@inputDisabledBackground:       @grayLighter;
@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;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;


// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";


// Input placeholder text color
// -------------------------
@placeholderText:         @grayLight;


// Hr border color
// -------------------------
@hrBorder:                @grayLighter;


// Wells
// -------------------------
@wellBackground:                  #f5f5f5;


// Navbar
// -------------------------
@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBackgroundHighlight:       @grayDark;
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      @gray;
@navbarLinkColor:                 @gray;
@navbarLinkColorHover:            @grayLighter;
@navbarLinkColorActive:           @grayLighter;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

@navbarBrandColor:                @navbarLinkColor;

// Inverted navbar
@navbarInverseBackground:                #111111;
@navbarInverseBackgroundHighlight:       #222222;
@navbarInverseBorder:                    #252525;

@navbarInverseText:                      @grayLight;
@navbarInverseLinkColor:                 @grayLight;
@navbarInverseLinkColorHover:            @white;
@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover:       transparent;
@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;

@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus:     @white;
@navbarInverseSearchBorder:              @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor:    #ccc;

@navbarInverseBrandColor:                @navbarInverseLinkColor;


// Pagination
// -------------------------
@paginationBackground:                #fff;
@paginationBorder:                    #ddd;
@paginationActiveBackground:          #f5f5f5;


// Hero unit
// -------------------------
@heroUnitBackground:              @grayLighter;
@heroUnitHeadingColor:            inherit;
@heroUnitLeadColor:               inherit;


// 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%);


// Tooltips and popovers
// -------------------------
@tooltipColor:            #fff;
@tooltipBackground:       #000;
@tooltipArrowWidth:       5px;
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:       #fff;
@popoverArrowWidth:       10px;
@popoverArrowColor:       #fff;
@popoverTitleBackground:  darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  rgba(0,0,0,.25);



// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));


// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
      
//
// Modals
// Adapted from http://github.com/necolas/normalize.css
// --------------------------------------------------


// Display in IE6-9 and FF3
// -------------------------

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

// Display block in IE6-9 and FF3
// -------------------------

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// Prevents modern browsers from displaying 'audio' without controls
// -------------------------

audio:not([controls]) {
    display: none;
}

// Base settings
// -------------------------

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
  .tab-focus();
}
// Hover & Active
a:hover,
a:active {
  outline: 0;
}

// Prevents sub and sup affecting line-height in all browsers
// -------------------------

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

// Img border in a's and image quality
// -------------------------

img {
  max-width: 100%; // Make images inherently responsive
  height: auto; // Make images inherently responsive
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

// Prevent max-width from affecting Google Maps
#map_canvas img {
  max-width: none;
}

// Forms
// -------------------------

// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible; // Inner spacing ie IE6/7
  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; // Cursors on all buttons applied consistently
  -webkit-appearance: button; // Style clickable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
  overflow: auto; // Remove vertical scrollbar in IE6-9
  vertical-align: top; // Readability and alignment cross-browser
}
//
// Mixins
// --------------------------------------------------


// UTILITY MIXINS
// --------------------------------------------------

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

// Webkit-style focus
// ------------------
.tab-focus() {
  // Default
  outline: thin dotted #333;
  // Webkit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

// Center-align a block level element
// ----------------------------------
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// IE7 inline-block
// ----------------
.ie7-inline-block() {
  *display: inline; /* IE7 inline-block hack */
  *zoom: 1;
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
.ie7-restore-left-whitespace() {
  *margin-left: .3em;

  &:first-child {
    *margin-left: 0;
  }
}

.ie7-restore-right-whitespace() {
  *margin-right: .3em;
}

// Sizing shortcuts
// -------------------------
.size(@height, @width) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size, @size);
}

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}


// FONTS
// --------------------------------------------------

#font {
  #family {
    .serif() {
      font-family: @serifFontFamily;
    }
    .sans-serif() {
      font-family: @sansFontFamily;
    }
    .monospace() {
      font-family: @monoFontFamily;
    }
  }
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .sans-serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .monospace;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
}


// FORMS
// --------------------------------------------------

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}



// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
  // Set the text color
  > label,
  .help-block,
  .help-inline {
    color: @textColor;
  }
  // Style inputs accordingly
  .checkbox,
  .radio,
  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
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
         -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
              box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
    }
  }
  // Give a small background color for input-prepend/-append
  .input-prepend .add-on,
  .input-append .add-on {
    color: @textColor;
    background-color: @backgroundColor;
    border-color: @textColor;
  }
}



// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Single Corner Border Radius
.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
      -moz-border-radius-topleft: @radius;
          border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
  -webkit-border-top-right-radius: @radius;
      -moz-border-radius-topright: @radius;
          border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
  -webkit-border-bottom-right-radius: @radius;
      -moz-border-radius-bottomright: @radius;
          border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
      -moz-border-radius-bottomleft: @radius;
          border-bottom-left-radius: @radius;
}

// Single Side Border Radius
.border-top-radius(@radius) {
  .border-top-right-radius(@radius);
  .border-top-left-radius(@radius);
}
.border-right-radius(@radius) {
  .border-top-right-radius(@radius);
  .border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius) {
  .border-bottom-right-radius(@radius);
  .border-bottom-left-radius(@radius);
}
.border-left-radius(@radius) {
  .border-top-left-radius(@radius);
  .border-bottom-left-radius(@radius);
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

// Transformations
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skew(@x, @y);
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
	-webkit-backface-visibility: @visibility;
	   -moz-backface-visibility: @visibility;
	        backface-visibility: @visibility;
}

// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
.background-clip(@clip) {
  -webkit-background-clip: @clip;
     -moz-background-clip: @clip;
          background-clip: @clip;
}

// Background sizing
.background-size(@size){
  -webkit-background-size: @size;
     -moz-background-size: @size;
       -o-background-size: @size;
          background-size: @size;
}


// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// User select
// For selecting text on the page
.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select;
       -o-user-select: @select;
          user-select: @select;
}

// Resize anything
.resizable(@direction) {
  resize: @direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}

// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
  -webkit-column-count: @columnCount;
     -moz-column-count: @columnCount;
          column-count: @columnCount;
  -webkit-column-gap: @columnGap;
     -moz-column-gap: @columnGap;
          column-gap: @columnGap;
}

// Optional hyphenation
.hyphens(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
      -ms-hyphens: @mode;
       -o-hyphens: @mode;
          hyphens: @mode;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}



// BACKGROUNDS
// --------------------------------------------------

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
  .background(@color: @white, @alpha: 1) {
    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
  }
  .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 alerts
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  color: @textColor;
  text-shadow: @textShadow;
  #gradient > .vertical(@primaryColor, @secondaryColor);
  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
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop*100%, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .radial(@innerColor: #555, @outerColor: #333)  {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
  }
  .striped(@color, @angle: 45deg) {
    background-color: @color;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  }
}
// Reset filters for IE
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}



// COMPONENT MIXINS
// --------------------------------------------------

// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: @white) {
  // IE7 needs a set width since we gave a height. Restricting just
  // to IE7 to keep the 1px left/right space in other browsers.
  // It is unclear where IE is getting the extra space that we need
  // to negative-margin away, but so it goes.
  *width: 100%;
  height: 1px;
  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: @top;
  border-bottom: 1px solid @bottom;
}

// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  .reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:active, &.active, &.disabled, &[disabled] {
    color: @textColor;
    background-color: @endColor;
    *background-color: darken(@endColor, 5%);
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken(@endColor, 10%) e("\9");
  }
}

// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
.navbarVerticalAlign(@elementHeight) {
  margin-top: (@navbarHeight - @elementHeight) / 2;
}



// Grid System
// -----------

// Centered container element
.container-fixed() {
  margin-right: auto;
  margin-left: auto;
  .clearfix();
}

// Table columns
.tableColumns(@columnSpan: 1) {
  float: none; // undo default grid column styles
  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
  margin-left: 0; // undo default grid column styles
}

// Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
  margin-left: @gridGutterWidth * -1;
  .clearfix();
}
.makeColumn(@columns: 1, @offset: 0) {
  float: left;
  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

// The Grid
#grid {

  .core (@gridColumnWidth, @gridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .offsetX (@index) when (@index > 0) {
      (~".offset@{index}") { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    [class*="span"] {
      float: left;
      margin-left: @gridGutterWidth;
    }

    // Set the container width, and override it for fixed navbars in media queries
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container { .span(@gridColumns); }

    // generate .spanX and .offsetX
    .spanX (@gridColumns);
    .offsetX (@gridColumns);

  }

  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .offsetX (@index) when (@index > 0) {
      (~'.offset@{index}') { .offset(@index); }
      (~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
  	  *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
    }

    .offsetFirstChild (@columns) {
      margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
      *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
    }

    .span (@columns) {
      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
    }

    .row-fluid {
      width: 100%;
      .clearfix();
      [class*="span"] {
        .input-block-level();
        float: left;
        margin-left: @fluidGridGutterWidth;
        *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
      }
      [class*="span"]:first-child {
        margin-left: 0;
      }

      // generate .spanX and .offsetX
      .spanX (@gridColumns);
      .offsetX (@gridColumns);
    }

  }

  .input(@gridColumnWidth, @gridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .span(@columns) {
      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
    }

    input,
    textarea,
    .uneditable-input {
      margin-left: 0; // override margin-left from core grid system
    }

    // Space grid-sized controls properly if multiple per line
    .controls-row [class*="span"] + [class*="span"] {
      margin-left: @gridGutterWidth;
    }

    // generate .spanX
    .spanX (@gridColumns);

  }

}
//
// Scaffolding
// --------------------------------------------------


// Body reset
// -------------------------

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}


// Links
// -------------------------

a {
  color: @linkColor;
  text-decoration: none;
}
a:hover {
  color: @linkColorHover;
  text-decoration: underline;
}


// Images
// -------------------------

.img-rounded {
  .border-radius(6px);
}

.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
          box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.img-circle {
  .border-radius(500px);
}
//
// Grid system
// --------------------------------------------------


// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);

// Fluid (940px)
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);

// Reset utility classes due to specificity
[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}
//
// Layouts
// --------------------------------------------------


// Container (centered, fixed-width layouts)
.container {
  .container-fixed();
}

// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
  padding-right: @gridGutterWidth;
  padding-left: @gridGutterWidth;
  .clearfix();
}//
// Typography
// --------------------------------------------------


// Body text
// -------------------------

p {
  margin: 0 0 @baseLineHeight / 2;
}
.lead {
  margin-bottom: @baseLineHeight;
  font-size: 20px;
  font-weight: 200;
  line-height: @baseLineHeight * 1.5;
}


// Emphasis & misc
// -------------------------

small {
  font-size: 85%; // Ex: 14px base font * 85% = about 12px
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
.muted {
  color: @grayLight;
}


// Headings
// -------------------------

h1, h2, h3, h4, h5, h6 {
  margin: (@baseLineHeight / 2) 0;
  font-family: @headingsFontFamily;
  font-weight: @headingsFontWeight;
  line-height: 1;
  color: @headingsColor;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
  small {
    font-weight: normal;
    line-height: 1;
    color: @grayLight;
  }
}
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }

h1 small { font-size: 24px; }
h2 small { font-size: 18px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }


// Page header
// -------------------------

.page-header {
  padding-bottom: (@baseLineHeight / 2) - 1;
  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
  border-bottom: 1px solid @grayLighter;
}



// Lists
// --------------------------------------------------

// Unordered and Ordered lists
ul, ol {
  padding: 0;
  margin: 0 0 @baseLineHeight / 2 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
  line-height: @baseLineHeight;
}
ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

// Description Lists
dl {
  margin-bottom: @baseLineHeight;
}
dt,
dd {
  line-height: @baseLineHeight;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
.dl-horizontal {
  dt {
    float: left;
    width: 120px;
    clear: left;
    text-align: right;
    .text-overflow();
  }
  dd {
    margin-left: 130px;
  }
}

// MISC
// ----

// Horizontal rules
hr {
  margin: @baseLineHeight 0;
  border: 0;
  border-top: 1px solid @hrBorder;
  border-bottom: 1px solid @white;
}

// Abbreviations and acronyms
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted @grayLight;
}
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

// Blockquotes
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 @baseLineHeight;
  border-left: 5px solid @grayLighter;
  p {
    margin-bottom: 0;
    #font > .shorthand(16px,300,@baseLineHeight * 1.25);
  }
  small {
    display: block;
    line-height: @baseLineHeight;
    color: @grayLight;
    &:before {
      content: '\2014 \00A0';
    }
  }

  // Float right with text-align: right
  &.pull-right {
    float: right;
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid @grayLighter;
    border-left: 0;
    p,
    small {
      text-align: right;
    }
    small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
  }
}

// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}

// Addresses
address {
  display: block;
  margin-bottom: @baseLineHeight;
  font-style: normal;
  line-height: @baseLineHeight;
}
//
// Code (inline and blocK)
// --------------------------------------------------


// Inline and block code styles
code,
pre {
  padding: 0 3px 2px;
  #font > #family > .monospace;
  font-size: @baseFontSize - 2;
  color: @grayDark;
  .border-radius(3px);
}

// Inline code
code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

// Blocks of code
pre {
  display: block;
  padding: (@baseLineHeight - 1) / 2;
  margin: 0 0 @baseLineHeight / 2;
  font-size: @baseFontSize - 1; // 14px to 13px
  line-height: @baseLineHeight;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc; // fallback for IE7-8
  border: 1px solid rgba(0,0,0,.15);
  .border-radius(4px);

  // Make prettyprint styles more spaced out for readability
  &.prettyprint {
    margin-bottom: @baseLineHeight;
  }

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    color: inherit;
    background-color: transparent;
    border: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}//
// Forms
// --------------------------------------------------


// GENERAL STYLES
// --------------

// Make all forms have space below them
form {
  margin: 0 0 @baseLineHeight;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

// Groups of fields with labels on top (legends)
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: @baseLineHeight;
  font-size: @baseFontSize * 1.5;
  line-height: @baseLineHeight * 2;
  color: @grayDark;
  border: 0;
  border-bottom: 1px solid #e5e5e5;

  // Small
  small {
    font-size: @baseLineHeight * .75;
    color: @grayLight;
  }
}

// Set font for forms
label,
input,
button,
select,
textarea {
  #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
  font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}

// Identify controls by their labels
label {
  display: block;
  margin-bottom: 5px;
}

// Form controls
// -------------------------

// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: @baseLineHeight;
  padding: 4px 6px;
  margin-bottom: 9px;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @gray;
  .border-radius(@inputBorderRadius);
}

// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea {
  width: 210px;
}
// Reset height since textareas have rows
textarea {
  height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: @inputBackground;
  border: 1px solid @inputBorder;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  .transition(~"border linear .2s, box-shadow linear .2s");

  // Focus state
  &:focus {
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
  }
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  *margin-top: 0; /* IE7 */
  margin-top: 1px \9; /* IE8-9 */
  line-height: normal;
  cursor: pointer;
}

// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto; // Override of generic input selector
}

// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
  height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
  line-height: 30px;
}

// Make select elements obey height by applying a border
select {
  width: 220px; // default input width + 10px of padding that doesn't get applied
  border: 1px solid #bbb;
  background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  .tab-focus();
}


// Uneditable inputs
// -------------------------

// Make uneditable inputs look inactive
.uneditable-input,
.uneditable-textarea {
  color: @grayLight;
  background-color: darken(@inputBackground, 1%);
  border-color: @inputBorder;
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
  cursor: not-allowed;
}

// For text that needs to appear as an input but should not be an input
.uneditable-input {
  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
  white-space: nowrap;
}

// Make uneditable textareas behave like a textarea
.uneditable-textarea {
  width: auto;
  height: auto;
}


// Placeholder
// -------------------------

// Placeholder text gets special styles; can't be bundled together though for some reason
input,
textarea {
  .placeholder();
}


// CHECKBOXES & RADIOS
// -------------------

// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
  min-height: 18px; // clear the floating input if there is no label text
  padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -18px;
}

// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px; // has to be padding because margin collaspes
}

// Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px; // space out consecutive inline controls
}



// INPUT SIZES
// -----------

// General classes for quick sizes
.input-mini       { width: 60px; }
.input-small      { width: 90px; }
.input-medium     { width: 150px; }
.input-large      { width: 210px; }
.input-xlarge     { width: 270px; }
.input-xxlarge    { width: 530px; }

// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
// Redeclare since the fluid row class is more specific
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
  float: none;
  margin-left: 0;
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
  display: inline-block;
}



// GRID SIZING FOR INPUTS
// ----------------------

// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);

// Control row for multiple inputs per line
.controls-row {
  .clearfix(); // Clear the float from controls
}
.controls-row [class*="span"] {
  float: left; // Float to collapse white-space for proper grid alignment
}




// DISABLED STATE
// --------------

// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: @inputDisabledBackground;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
  background-color: transparent;
}




// FORM FIELD FEEDBACK STATES
// --------------------------

// Warning
.control-group.warning {
  .formFieldState(@warningText, @warningText, @warningBackground);
}
// Error
.control-group.error {
  .formFieldState(@errorText, @errorText, @errorBackground);
}
// Success
.control-group.success {
  .formFieldState(@successText, @successText, @successBackground);
}

// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
  &:focus {
    border-color: darken(#ee5f5b, 10%);
    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
  }
}



// FORM ACTIONS
// ------------

.form-actions {
  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
  margin-top: @baseLineHeight;
  margin-bottom: @baseLineHeight;
  background-color: @formActionsBackground;
  border-top: 1px solid #e5e5e5;
  .clearfix(); // Adding clearfix to allow for .pull-right button containers
}



// HELP TEXT
// ---------

.help-block,
.help-inline {
  color: lighten(@textColor, 15%); // lighten the text some for contrast
}

.help-block {
  display: block; // account for any element using help-block
  margin-bottom: @baseLineHeight / 2;
}

.help-inline {
  display: inline-block;
  .ie7-inline-block();
  vertical-align: middle;
  padding-left: 5px;
}



// INPUT GROUPS
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
  margin-bottom: 5px;
  font-size: 0;
  white-space: nowrap; // Prevent span and input from separating

  input,
  select,
  .uneditable-input {
    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
    *margin-left: 0;
    font-size: @baseFontSize;
    vertical-align: top;
    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    // Make input on top when focused so blue border and shadow always show
    &:focus {
      z-index: 2;
    }
  }
  .add-on {
    display: inline-block;
    width: auto;
    height: @baseLineHeight;
    min-width: 16px;
    padding: 4px 5px;
    font-size: @baseFontSize;
    font-weight: normal;
    line-height: @baseLineHeight;
    text-align: center;
    text-shadow: 0 1px 0 @white;
    background-color: @grayLighter;
    border: 1px solid #ccc;
  }
  .add-on,
  .btn {
    margin-left: -1px;
    vertical-align: top;
    .border-radius(0);
  }
  .active {
    background-color: lighten(@green, 30);
    border-color: @green;
  }
}
.input-prepend {
  .add-on,
  .btn {
    margin-right: -1px;
  }
  .add-on:first-child,
  .btn:first-child {
    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }
}
.input-append {
  input,
  select,
  .uneditable-input {
    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }
  .add-on:last-child,
  .btn:last-child {
    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  }
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
  input,
  select,
  .uneditable-input {
    .border-radius(0);
  }
  .add-on:first-child,
  .btn:first-child {
    margin-right: -1px;
    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }
  .add-on:last-child,
  .btn:last-child {
    margin-left: -1px;
    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  }
}



// SEARCH FORM
// -----------

input.search-query {
  padding-right: 14px;
  padding-right: 4px \9;
  padding-left: 14px;
  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0; // Remove the default margin on all inputs
  .border-radius(15px);
}

/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
  .border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
  .border-radius(14px 0 0 14px)
}
.form-search .input-append .btn {
  .border-radius(0 14px 14px 0)
}
.form-search .input-prepend .search-query {
  .border-radius(0 14px 14px 0)
}
.form-search .input-prepend .btn {
  .border-radius(14px 0 0 14px)
}




// HORIZONTAL & VERTICAL FORMS
// ---------------------------

// Common properties
// -----------------

.form-search,
.form-inline,
.form-horizontal {
  input,
  textarea,
  select,
  .help-inline,
  .uneditable-input,
  .input-prepend,
  .input-append {
    display: inline-block;
    .ie7-inline-block();
    margin-bottom: 0;
    vertical-align: middle;
  }
  // Re-hide hidden elements due to specifity
  .hide {
    display: none;
  }
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
  display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
  margin-bottom: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
  float: left;
  margin-right: 3px;
  margin-left: 0;
}


// Margin to space out fieldsets
.control-group {
  margin-bottom: @baseLineHeight / 2;
}

// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
  margin-top: @baseLineHeight;
  -webkit-margin-top-collapse: separate;
}

// Horizontal-specific styles
// --------------------------

.form-horizontal {
  // Increase spacing between groups
  .control-group {
    margin-bottom: @baseLineHeight;
    .clearfix();
  }
  // Float the labels left
  .control-label {
    float: left;
    width: 140px;
    padding-top: 5px;
    text-align: right;
  }
  // Move over all input controls and content
  .controls {
    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
    // don't inherit the margin of the parent, in this case .controls
    *display: inline-block;
    *padding-left: 20px;
    margin-left: 160px;
    *margin-left: 0;
    &:first-child {
      *padding-left: 160px;
    }
  }
  // Remove bottom margin on block level help text since that's accounted for on .control-group
  .help-block {
    margin-top: @baseLineHeight / 2;
    margin-bottom: 0;
  }
  // Move over buttons in .form-actions to align with .controls
  .form-actions {
    padding-left: 160px;
  }
}
//
// Tables
// --------------------------------------------------


// BASE TABLES
// -----------------

table {
  max-width: 100%;
  background-color: @tableBackground;
  border-collapse: collapse;
  border-spacing: 0;
}

// BASELINE STYLES
// ---------------

.table {
  width: 100%;
  margin-bottom: @baseLineHeight;
  // Cells
  th,
  td {
    padding: 8px;
    line-height: @baseLineHeight;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid @tableBorder;
  }
  th {
    font-weight: bold;
  }
  // Bottom align for column headings
  thead th {
    vertical-align: bottom;
  }
  // Remove top border from thead by default
  caption + thead tr:first-child th,
  caption + thead tr:first-child td,
  colgroup + thead tr:first-child th,
  colgroup + thead tr:first-child td,
  thead:first-child tr:first-child th,
  thead:first-child tr:first-child td {
    border-top: 0;
  }
  // Account for multiple tbody instances
  tbody + tbody {
    border-top: 2px solid @tableBorder;
  }
}



// CONDENSED TABLE W/ HALF PADDING
// -------------------------------

.table-condensed {
  th,
  td {
    padding: 4px 5px;
  }
}


// BORDERED VERSION
// ----------------

.table-bordered {
  border: 1px solid @tableBorder;
  border-collapse: separate; // Done so we can round those corners!
  *border-collapse: collapse; // IE7 can't round corners anyway
  border-left: 0;
  .border-radius(4px);
  th,
  td {
    border-left: 1px solid @tableBorder;
  }
  // Prevent a double border
  caption + thead tr:first-child th,
  caption + tbody tr:first-child th,
  caption + tbody tr:first-child td,
  colgroup + thead tr:first-child th,
  colgroup + tbody tr:first-child th,
  colgroup + tbody tr:first-child td,
  thead:first-child tr:first-child th,
  tbody:first-child tr:first-child th,
  tbody:first-child tr:first-child td {
    border-top: 0;
  }
  // For first th or td in the first row in the first thead or tbody
  thead:first-child tr:first-child th:first-child,
  tbody:first-child tr:first-child td:first-child {
    -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
  }
  thead:first-child tr:first-child th:last-child,
  tbody:first-child tr:first-child td:last-child {
    -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
  }
  // For first th or td in the first row in the first thead or tbody
  thead:last-child tr:last-child th:first-child,
  tbody:last-child tr:last-child td:first-child,
  tfoot:last-child tr:last-child td:first-child {
    .border-radius(0 0 0 4px);
    -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
  }
  thead:last-child tr:last-child th:last-child,
  tbody:last-child tr:last-child td:last-child,
  tfoot:last-child tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
  }

  // Special fixes to round the left border on the first td/th
  caption + thead tr:first-child th:first-child,
  caption + tbody tr:first-child td:first-child,
  colgroup + thead tr:first-child th:first-child,
  colgroup + tbody tr:first-child td:first-child {
    -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
  }
  caption + thead tr:first-child th:last-child,
  caption + tbody tr:first-child td:last-child,
  colgroup + thead tr:first-child th:last-child,
  colgroup + tbody tr:first-child td:last-child {
    -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
          -moz-border-right-topleft: 4px;
  }

}




// ZEBRA-STRIPING
// --------------

// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
  tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
      background-color: @tableBackgroundAccent;
    }
  }
}


// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table-hover {
  tbody {
    tr:hover td,
    tr:hover th {
      background-color: @tableBackgroundHover;
    }
  }
}


// TABLE CELL SIZING
// -----------------

// Reset default grid behavior
table [class*=span],
.row-fluid table [class*=span] {
  display: table-cell;
  float: none; // undo default grid column styles
  margin-left: 0; // undo default grid column styles
}

// Change the column widths to account for td/th padding
table {
  .span1     { .tableColumns(1); }
  .span2     { .tableColumns(2); }
  .span3     { .tableColumns(3); }
  .span4     { .tableColumns(4); }
  .span5     { .tableColumns(5); }
  .span6     { .tableColumns(6); }
  .span7     { .tableColumns(7); }
  .span8     { .tableColumns(8); }
  .span9     { .tableColumns(9); }
  .span10    { .tableColumns(10); }
  .span11    { .tableColumns(11); }
  .span12    { .tableColumns(12); }
  .span13    { .tableColumns(13); }
  .span14    { .tableColumns(14); }
  .span15    { .tableColumns(15); }
  .span16    { .tableColumns(16); }
  .span17    { .tableColumns(17); }
  .span18    { .tableColumns(18); }
  .span19    { .tableColumns(19); }
  .span20    { .tableColumns(20); }
  .span21    { .tableColumns(21); }
  .span22    { .tableColumns(22); }
  .span23    { .tableColumns(23); }
  .span24    { .tableColumns(24); }
}


// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped

.table {
  tbody tr.success td {
    background-color: @successBackground;
  }
  tbody tr.error td {
    background-color: @errorBackground;
  }
  tbody tr.info td {
    background-color: @infoBackground;
  }
}
//
// Sprites
// --------------------------------------------------


// ICONS
// -----

// All icons receive the styles of the <i> tag with a base class
// of .i and are then given a unique class to add width, height,
// and background-position. Your resulting HTML will look like
// <i class="icon-inbox"></i>.

// For the white version of the icons, just add the .icon-white class:
// <i class="icon-inbox icon-white"></i>

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  .ie7-restore-right-whitespace();
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("@{iconSpritePath}");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}

/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
.nav > .active > a > [class^="icon-"],
.nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"] {
  background-image: url("@{iconWhiteSpritePath}");
}

.icon-glass              { background-position: 0      0; }
.icon-music              { background-position: -24px  0; }
.icon-search             { background-position: -48px  0; }
.icon-envelope           { background-position: -72px  0; }
.icon-heart              { background-position: -96px  0; }
.icon-star               { background-position: -120px 0; }
.icon-star-empty         { background-position: -144px 0; }
.icon-user               { background-position: -168px 0; }
.icon-film               { background-position: -192px 0; }
.icon-th-large           { background-position: -216px 0; }
.icon-th                 { background-position: -240px 0; }
.icon-th-list            { background-position: -264px 0; }
.icon-ok                 { background-position: -288px 0; }
.icon-remove             { background-position: -312px 0; }
.icon-zoom-in            { background-position: -336px 0; }
.icon-zoom-out           { background-position: -360px 0; }
.icon-off                { background-position: -384px 0; }
.icon-signal             { background-position: -408px 0; }
.icon-cog                { background-position: -432px 0; }
.icon-trash              { background-position: -456px 0; }

.icon-home               { background-position: 0      -24px; }
.icon-file               { background-position: -24px  -24px; }
.icon-time               { background-position: -48px  -24px; }
.icon-road               { background-position: -72px  -24px; }
.icon-download-alt       { background-position: -96px  -24px; }
.icon-download           { background-position: -120px -24px; }
.icon-upload             { background-position: -144px -24px; }
.icon-inbox              { background-position: -168px -24px; }
.icon-play-circle        { background-position: -192px -24px; }
.icon-repeat             { background-position: -216px -24px; }
.icon-refresh            { background-position: -240px -24px; }
.icon-list-alt           { background-position: -264px -24px; }
.icon-lock               { background-position: -287px -24px; } // 1px off
.icon-flag               { background-position: -312px -24px; }
.icon-headphones         { background-position: -336px -24px; }
.icon-volume-off         { background-position: -360px -24px; }
.icon-volume-down        { background-position: -384px -24px; }
.icon-volume-up          { background-position: -408px -24px; }
.icon-qrcode             { background-position: -432px -24px; }
.icon-barcode            { background-position: -456px -24px; }

.icon-tag                { background-position: 0      -48px; }
.icon-tags               { background-position: -25px  -48px; } // 1px off
.icon-book               { background-position: -48px  -48px; }
.icon-bookmark           { background-position: -72px  -48px; }
.icon-print              { background-position: -96px  -48px; }
.icon-camera             { background-position: -120px -48px; }
.icon-font               { background-position: -144px -48px; }
.icon-bold               { background-position: -167px -48px; } // 1px off
.icon-italic             { background-position: -192px -48px; }
.icon-text-height        { background-position: -216px -48px; }
.icon-text-width         { background-position: -240px -48px; }
.icon-align-left         { background-position: -264px -48px; }
.icon-align-center       { background-position: -288px -48px; }
.icon-align-right        { background-position: -312px -48px; }
.icon-align-justify      { background-position: -336px -48px; }
.icon-list               { background-position: -360px -48px; }
.icon-indent-left        { background-position: -384px -48px; }
.icon-indent-right       { background-position: -408px -48px; }
.icon-facetime-video     { background-position: -432px -48px; }
.icon-picture            { background-position: -456px -48px; }

.icon-pencil             { background-position: 0      -72px; }
.icon-map-marker         { background-position: -24px  -72px; }
.icon-adjust             { background-position: -48px  -72px; }
.icon-tint               { background-position: -72px  -72px; }
.icon-edit               { background-position: -96px  -72px; }
.icon-share              { background-position: -120px -72px; }
.icon-check              { background-position: -144px -72px; }
.icon-move               { background-position: -168px -72px; }
.icon-step-backward      { background-position: -192px -72px; }
.icon-fast-backward      { background-position: -216px -72px; }
.icon-backward           { background-position: -240px -72px; }
.icon-play               { background-position: -264px -72px; }
.icon-pause              { background-position: -288px -72px; }
.icon-stop               { background-position: -312px -72px; }
.icon-forward            { background-position: -336px -72px; }
.icon-fast-forward       { background-position: -360px -72px; }
.icon-step-forward       { background-position: -384px -72px; }
.icon-eject              { background-position: -408px -72px; }
.icon-chevron-left       { background-position: -432px -72px; }
.icon-chevron-right      { background-position: -456px -72px; }

.icon-plus-sign          { background-position: 0      -96px; }
.icon-minus-sign         { background-position: -24px  -96px; }
.icon-remove-sign        { background-position: -48px  -96px; }
.icon-ok-sign            { background-position: -72px  -96px; }
.icon-question-sign      { background-position: -96px  -96px; }
.icon-info-sign          { background-position: -120px -96px; }
.icon-screenshot         { background-position: -144px -96px; }
.icon-remove-circle      { background-position: -168px -96px; }
.icon-ok-circle          { background-position: -192px -96px; }
.icon-ban-circle         { background-position: -216px -96px; }
.icon-arrow-left         { background-position: -240px -96px; }
.icon-arrow-right        { background-position: -264px -96px; }
.icon-arrow-up           { background-position: -289px -96px; } // 1px off
.icon-arrow-down         { background-position: -312px -96px; }
.icon-share-alt          { background-position: -336px -96px; }
.icon-resize-full        { background-position: -360px -96px; }
.icon-resize-small       { background-position: -384px -96px; }
.icon-plus               { background-position: -408px -96px; }
.icon-minus              { background-position: -433px -96px; }
.icon-asterisk           { background-position: -456px -96px; }

.icon-exclamation-sign   { background-position: 0      -120px; }
.icon-gift               { background-position: -24px  -120px; }
.icon-leaf               { background-position: -48px  -120px; }
.icon-fire               { background-position: -72px  -120px; }
.icon-eye-open           { background-position: -96px  -120px; }
.icon-eye-close          { background-position: -120px -120px; }
.icon-warning-sign       { background-position: -144px -120px; }
.icon-plane              { background-position: -168px -120px; }
.icon-calendar           { background-position: -192px -120px; }
.icon-random             { background-position: -216px -120px; width: 16px; }
.icon-comment            { background-position: -240px -120px; }
.icon-magnet             { background-position: -264px -120px; }
.icon-chevron-up         { background-position: -288px -120px; }
.icon-chevron-down       { background-position: -313px -119px; } // 1px, 1px off
.icon-retweet            { background-position: -336px -120px; }
.icon-shopping-cart      { background-position: -360px -120px; }
.icon-folder-close       { background-position: -384px -120px; }
.icon-folder-open        { background-position: -408px -120px; width: 16px; }
.icon-resize-vertical    { background-position: -432px -119px; } // 1px, 1px off
.icon-resize-horizontal  { background-position: -456px -118px; } // 1px, 2px off

.icon-hdd                     { background-position: 0      -144px; }
.icon-bullhorn                { background-position: -24px  -144px; }
.icon-bell                    { background-position: -48px  -144px; }
.icon-certificate             { background-position: -72px  -144px; }
.icon-thumbs-up               { background-position: -96px  -144px; }
.icon-thumbs-down             { background-position: -120px -144px; }
.icon-hand-right              { background-position: -144px -144px; }
.icon-hand-left               { background-position: -168px -144px; }
.icon-hand-up                 { background-position: -192px -144px; }
.icon-hand-down               { background-position: -216px -144px; }
.icon-circle-arrow-right      { background-position: -240px -144px; }
.icon-circle-arrow-left       { background-position: -264px -144px; }
.icon-circle-arrow-up         { background-position: -288px -144px; }
.icon-circle-arrow-down       { background-position: -312px -144px; }
.icon-globe                   { background-position: -336px -144px; }
.icon-wrench                  { background-position: -360px -144px; }
.icon-tasks                   { background-position: -384px -144px; }
.icon-filter                  { background-position: -408px -144px; }
.icon-briefcase               { background-position: -432px -144px; }
.icon-fullscreen              { background-position: -456px -144px; }
//
// Dropdown menus
// --------------------------------------------------


// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle {
  // The caret makes the toggle a bit too tall in IE7
  *margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

// Dropdown arrow/caret
// --------------------
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top:   4px solid @black;
  border-right: 4px solid transparent;
  border-left:  4px solid transparent;
  content: "";
}

// Place the caret
.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px;
}

// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindexDropdown;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0; // override default ul
  list-style: none;
  background-color: @dropdownBackground;
  border: 1px solid #ccc; // Fallback for IE7-8
  border: 1px solid @dropdownBorder;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;

  // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Dividers (basically an hr) within the dropdown
  .divider {
    .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
  }

  // Links within the dropdown menu
  a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: @baseLineHeight;
    color: @dropdownLinkColor;
    white-space: nowrap;
  }
}

// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  text-decoration: none;
  color: @dropdownLinkColorHover;
  background-color: @dropdownLinkBackgroundHover;
  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}

// Active state
// ------------
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: @dropdownLinkColorHover;
  text-decoration: none;
  outline: 0;
  background-color: @dropdownLinkBackgroundActive;
  #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
}

// Disabled state
// --------------
// Gray out text and ensure the hover state remains gray
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
  color: @grayLight;
}
// Nuke hover effects
.dropdown-menu .disabled > a:hover {
  text-decoration: none;
  background-color: transparent;
  cursor: default;
}

// Open state for the dropdown
// ---------------------------
.open {
  // IE7's z-index only goes to the nearest positioned ancestor, which would
  // make the menu appear below buttons that appeared later on the page
  *z-index: @zindexDropdown;

  & > .dropdown-menu {
    display: block;
  }
}

// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
  // Reverse the caret
  .caret {
    border-top: 0;
    border-bottom: 4px solid @black;
    content: "\2191";
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}

// Sub menus
// ---------------------------
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px 6px;
          border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: darken(@dropdownBackground, 20%);
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: @dropdownLinkColorHover;
}


// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
  padding-left: 20px;
  padding-right: 20px;
}

// Typeahead
// ---------
.typeahead {
  margin-top: 2px; // give it some space to breathe
  .border-radius(4px);
}
//
// Wells
// --------------------------------------------------


// Base class
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: @wellBackground;
  border: 1px solid darken(@wellBackground, 7%);
  .border-radius(4px);
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

// Sizes
.well-large {
  padding: 24px;
  .border-radius(6px);
}
.well-small {
  padding: 9px;
  .border-radius(3px);
}
//
// Component animations
// --------------------------------------------------


.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  overflow: visible \9;
  .transition(height .35s ease);
  &.in {
    height: auto;
  }
}
//
// Close icons
// --------------------------------------------------


.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: @baseLineHeight;
  color: @black;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  .opacity(20);
  &:hover {
    color: @black;
    text-decoration: none;
    cursor: pointer;
    .opacity(40);
  }
}

// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}//
// Buttons
// --------------------------------------------------


// Base styles
// --------------------------------------------------

// Core
.btn {
  display: inline-block;
  .ie7-inline-block();
  padding: 4px 14px;
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  *line-height: @baseLineHeight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  border: 1px solid @btnBorder;
  *border: 0; // Remove the border to prevent IE7's black border on input:focus
  border-bottom-color: darken(@btnBorder, 10%);
  .border-radius(4px);
  .ie7-restore-left-whitespace(); // Give IE7 some love
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");

  // Hover state
  &:hover {
    color: @grayDark;
    text-decoration: none;
    background-color: darken(@white, 10%);
    *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
    background-position: 0 -15px;

    // transition is only when going to hover, otherwise the background
    // behind the gradient (there for IE<=9 fallback) gets mismatched
    .transition(background-position .1s linear);
  }

  // Focus state for keyboard and accessibility
  &:focus {
    .tab-focus();
  }

  // Active state
  &.active,
  &:active {
    background-color: darken(@white, 10%);
    background-color: darken(@white, 15%) e("\9");
    background-image: none;
    outline: 0;
    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
  }

  // Disabled state
  &.disabled,
  &[disabled] {
    cursor: default;
    background-color: darken(@white, 10%);
    background-image: none;
    .opacity(65);
    .box-shadow(none);
  }

}



// Button Sizes
// --------------------------------------------------

// Large
.btn-large {
  padding: 9px 14px;
  font-size: @baseFontSize + 2px;
  line-height: normal;
  .border-radius(5px);
}
.btn-large [class^="icon-"] {
  margin-top: 2px;
}

// Small
.btn-small {
  padding: 3px 9px;
  font-size: @baseFontSize - 2px;
  line-height: @baseLineHeight - 2px;
}
.btn-small [class^="icon-"] {
  margin-top: 0;
}

// Mini
.btn-mini {
  padding: 2px 6px;
  font-size: @baseFontSize - 3px;
  line-height: @baseLineHeight - 4px;
}

// Block button
.btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  .box-sizing(border-box);
}
.btn-block + .btn-block {
  margin-top: 5px;
}


// Alternate buttons
// --------------------------------------------------

// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
  color: rgba(255,255,255,.75);
}

// Set the backgrounds
// -------------------------
.btn {
  // reset here as of 2.0.3 due to Recess property order
  border-color: #c5c5c5;
  border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
.btn-primary {
  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
// Warning appears are orange
.btn-warning {
  .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
}
// Danger and error appear as red
.btn-danger {
  .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}
// Success appears as green
.btn-success {
  .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
}
// Info appears as a neutral blue
.btn-info {
  .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
}
// Inverse appears as dark gray
.btn-inverse {
  .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
}


// Cross-browser Jank
// --------------------------------------------------

button.btn,
input[type="submit"].btn {

  // Firefox 3.6 only I believe
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  // IE7 has some default padding on button controls
  *padding-top: 3px;
  *padding-bottom: 3px;

  &.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
  }
  &.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
  }
  &.btn-mini {
    *padding-top: 1px;
    *padding-bottom: 1px;
  }
}


// Link buttons
// --------------------------------------------------

// Make a button look and behave like a link
.btn-link,
.btn-link:active {
  background-color: transparent;
  background-image: none;
  .box-shadow(none);
}
.btn-link {
  border-color: transparent;
  cursor: pointer;
  color: @linkColor;
  .border-radius(0);
}
.btn-link:hover {
  color: @linkColorHover;
  text-decoration: underline;
  background-color: transparent;
}
//
// Button groups
// --------------------------------------------------


// Make the div behave like a button
.btn-group {
  position: relative;
  font-size: 0; // remove as part 1 of font-size inline-block hack
  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
  .ie7-restore-left-whitespace();
}

// Space out series of button groups
.btn-group + .btn-group {
  margin-left: 5px;
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
  font-size: 0; // Hack to remove whitespace that results from using inline-block
  margin-top: @baseLineHeight / 2;
  margin-bottom: @baseLineHeight / 2;
  .btn-group {
    display: inline-block;
    .ie7-inline-block();
  }
  .btn + .btn,
  .btn-group + .btn,
  .btn + .btn-group {
    margin-left: 5px;
  }
}

// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
  position: relative;
  .border-radius(0);
}
.btn-group > .btn + .btn {
  margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu {
  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
}

// Reset fonts for other sizes
.btn-group > .btn-mini {
  font-size: 11px;
}
.btn-group > .btn-small {
  font-size: 12px;
}
.btn-group > .btn-large {
  font-size: 16px;
}

// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
  margin-left: 0;
     -webkit-border-top-left-radius: 4px;
         -moz-border-radius-topleft: 4px;
             border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px;
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
     -webkit-border-top-right-radius: 4px;
         -moz-border-radius-topright: 4px;
             border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-bottomright: 4px;
          border-bottom-right-radius: 4px;
}
// Reset corners for large buttons
.btn-group > .btn.large:first-child {
  margin-left: 0;
     -webkit-border-top-left-radius: 6px;
         -moz-border-radius-topleft: 6px;
             border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
      -moz-border-radius-bottomleft: 6px;
          border-bottom-left-radius: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
     -webkit-border-top-right-radius: 6px;
         -moz-border-radius-topright: 6px;
             border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
      -moz-border-radius-bottomright: 6px;
          border-bottom-right-radius: 6px;
}

// On hover/focus/active, bring the proper btn to front
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
}

// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}



// Split button dropdowns
// ----------------------

// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
  .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  *padding-top: 5px;
  *padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
  padding-left: 5px;
  padding-right: 5px;
  *padding-top: 2px;
  *padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
  *padding-top: 5px;
  *padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
  *padding-top: 7px;
  *padding-bottom: 7px;
}

.btn-group.open {

  // The clickable button for toggling the menu
  // Remove the gradient and set the same inset shadow as the :active state
  .dropdown-toggle {
    background-image: none;
    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
  }

  // Keep the hover's background when dropdown is open
  .btn.dropdown-toggle {
    background-color: @btnBackgroundHighlight;
  }
  .btn-primary.dropdown-toggle {
    background-color: @btnPrimaryBackgroundHighlight;
  }
  .btn-warning.dropdown-toggle {
    background-color: @btnWarningBackgroundHighlight;
  }
  .btn-danger.dropdown-toggle {
    background-color: @btnDangerBackgroundHighlight;
  }
  .btn-success.dropdown-toggle {
    background-color: @btnSuccessBackgroundHighlight;
  }
  .btn-info.dropdown-toggle {
    background-color: @btnInfoBackgroundHighlight;
  }
  .btn-inverse.dropdown-toggle {
    background-color: @btnInverseBackgroundHighlight;
  }
}


// Reposition the caret
.btn .caret {
  margin-top: 8px;
  margin-left: 0;
}
// Carets in other button sizes
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret {
  margin-top: 6px;
}
.btn-large .caret {
  border-left-width:  5px;
  border-right-width: 5px;
  border-top-width:   5px;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
  border-bottom: 5px solid @black;
  border-top: 0;
}



// Account for other colors
.btn-primary,
.btn-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
  .caret {
    border-top-color: @white;
    border-bottom-color: @white;
  }
}



// Vertical button groups
// ----------------------

.btn-group-vertical {
  display: inline-block; // makes buttons only take up the width they need
  .ie7-inline-block();
}
.btn-group-vertical .btn {
  display: block;
  float: none;
  width: 100%;
  .border-radius(0);
}
.btn-group-vertical .btn + .btn {
  margin-left: 0;
  margin-top: -1px;
}
.btn-group-vertical .btn:first-child {
  .border-radius(4px 4px 0 0);
}
.btn-group-vertical .btn:last-child {
  .border-radius(0 0 4px 4px);
}
.btn-group-vertical .btn-large:first-child {
  .border-radius(6px 6px 0 0);
}
.btn-group-vertical .btn-large:last-child {
  .border-radius(0 0 6px 6px);
}
//
// Alerts
// --------------------------------------------------


// Base styles
// -------------------------

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: @baseLineHeight;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: @warningBackground;
  border: 1px solid @warningBorder;
  .border-radius(4px);
  color: @warningText;
}
.alert h4 {
  margin: 0;
}

// Adjust close link position
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: @baseLineHeight;
}


// Alternate styles
// -------------------------

.alert-success {
  background-color: @successBackground;
  border-color: @successBorder;
  color: @successText;
}
.alert-danger,
.alert-error {
  background-color: @errorBackground;
  border-color: @errorBorder;
  color: @errorText;
}
.alert-info {
  background-color: @infoBackground;
  border-color: @infoBorder;
  color: @infoText;
}


// Block alerts
// -------------------------

.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
}
//
// 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;
}

// Redeclare pull classes because of specifity
.nav > .pull-right {
  float: right;
}

// Nav headers (for dropdowns and lists)
.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: @baseLineHeight;
  color: @grayLight;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
  margin-top: 9px;
}



// NAV LIST
// --------

.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
  margin-left:  -15px;
  margin-right: -15px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
  padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
  color: @white;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  background-color: @linkColor;
}
.nav-list [class^="icon-"] {
  margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
  .nav-divider();
}



// TABS AND PILLS
// -------------

// Common styles
.nav-tabs,
.nav-pills {
  .clearfix();
}
.nav-tabs > li,
.nav-pills > li {
  float: left;
}
.nav-tabs > li > a,
.nav-pills > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px; // keeps the overall height an even number
}

// TABS
// ----

// Give the tabs something to sit on
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
// Make the list-items overlay the bottom border
.nav-tabs > li {
  margin-bottom: -1px;
}
// Actual tabs (as links)
.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: @baseLineHeight;
  border: 1px solid transparent;
  .border-radius(4px 4px 0 0);
  &:hover {
    border-color: @grayLighter @grayLighter #ddd;
  }
}
// Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
  color: @gray;
  background-color: @white;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}


// PILLS
// -----

// Links rendered as pills
.nav-pills > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
  .border-radius(5px);
}

// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
  color: @white;
  background-color: @linkColor;
}



// STACKED NAV
// -----------

// Stacked tabs and pills
.nav-stacked > li {
  float: none;
}
.nav-stacked > li > a {
  margin-right: 0; // no need for the gap between nav items
}

// Tabs
.nav-tabs.nav-stacked {
  border-bottom: 0;
}
.nav-tabs.nav-stacked > li > a {
  border: 1px solid #ddd;
  .border-radius(0);
}
.nav-tabs.nav-stacked > li:first-child > a {
  .border-top-radius(4px);
}
.nav-tabs.nav-stacked > li:last-child > a {
  .border-bottom-radius(4px);
}
.nav-tabs.nav-stacked > li > a:hover {
  border-color: #ddd;
  z-index: 2;
}

// Pills
.nav-pills.nav-stacked > li > a {
  margin-bottom: 3px;
}
.nav-pills.nav-stacked > li:last-child > a {
  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
}



// DROPDOWNS
// ---------

.nav-tabs .dropdown-menu {
  .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
}
.nav-pills .dropdown-menu {
  .border-radius(6px); // make rounded corners match the pills
}

// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav .dropdown-toggle .caret {
  border-top-color: @linkColor;
  border-bottom-color: @linkColor;
  margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret {
  border-top-color: @linkColorHover;
  border-bottom-color: @linkColorHover;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
  margin-top: 8px;
}

// Active dropdown links
// -------------------------
.nav .active .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
  border-top-color: @gray;
  border-bottom-color: @gray;
}

// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
  cursor: pointer;
}

// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
  color: @white;
  background-color: @grayLight;
  border-color: @grayLight;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
  border-top-color: @white;
  border-bottom-color: @white;
  .opacity(100);
}

// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
  border-color: @grayLight;
}



// TABBABLE
// --------


// COMMON STYLES
// -------------

// Clear any floats
.tabbable {
  .clearfix();
}
.tab-content {
  overflow: auto; // prevent content from running below tabs
}

// Remove border on bottom, left, right
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}


// BOTTOM
// ------

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
  .border-radius(0 0 4px 4px);
  &:hover {
    border-bottom-color: transparent;
    border-top-color: #ddd;
  }
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover {
  border-color: transparent #ddd #ddd #ddd;
}

// LEFT & RIGHT
// ------------

// Common styles
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

// Tabs on the left
.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  .border-radius(4px 0 0 4px);
}
.tabs-left > .nav-tabs > li > a:hover {
  border-color: @grayLighter #ddd @grayLighter @grayLighter;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: @white;
}

// Tabs on the right
.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  .border-radius(0 4px 4px 0);
}
.tabs-right > .nav-tabs > li > a:hover {
  border-color: @grayLighter @grayLighter @grayLighter #ddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: @white;
}



// DISABLED STATES
// ---------------

// Gray out text
.nav > .disabled > a {
  color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover {
  text-decoration: none;
  background-color: transparent;
  cursor: default;
}
//
// Navbars (Redux)
// --------------------------------------------------


// COMMON STYLES
// -------------

// Base class and wrapper
.navbar {
  overflow: visible;
  margin-bottom: @baseLineHeight;
  color: @navbarText;

  // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
  *position: relative;
  *z-index: 2;
}

// Inner for background effects
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
  min-height: @navbarHeight;
  padding-left:  20px;
  padding-right: 20px;
  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  border: 1px solid @navbarBorder;
  .border-radius(4px);
  .box-shadow(0 1px 4px rgba(0,0,0,.065));
}

// Set width to auto for default container
// We then reset it for fixed navbars in the #gridSystem mixin
.navbar .container {
  width: auto;
}

// Override the default collapsed state
.nav-collapse.collapse {
  height: auto;
}


// Brand: website or project name
// -------------------------
.navbar .brand {
  float: left;
  display: block;
  // Vertically center the text given @navbarHeight
  padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
  margin-left: -20px; // negative indent to left-align the text down the page
  font-size: 20px;
  font-weight: 200;
  color: @navbarBrandColor;
  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
  &:hover {
    text-decoration: none;
  }
}

// Plain text in topbar
// -------------------------
.navbar-text {
  margin-bottom: 0;
  line-height: @navbarHeight;
}

// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
  color: @navbarLinkColor;
  &:hover {
    color: @navbarLinkColorHover;
  }
}

// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
  height: @navbarHeight;
  margin: 0 9px;
  border-left: 1px solid @navbarBackground;
  border-right: 1px solid @navbarBackgroundHighlight;
}

// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
  .navbarVerticalAlign(28px); // Vertically center in navbar
}
.navbar .btn-group .btn {
  margin: 0; // then undo the margin here so we don't accidentally double it
}

// Navbar forms
.navbar-form {
  margin-bottom: 0; // remove default bottom margin
  .clearfix();
  input,
  select,
  .radio,
  .checkbox {
    .navbarVerticalAlign(30px); // Vertically center in navbar
  }
  input,
  select,
  .btn {
    display: inline-block;
    margin-bottom: 0;
  }
  input[type="image"],
  input[type="checkbox"],
  input[type="radio"] {
    margin-top: 3px;
  }
  .input-append,
  .input-prepend {
    margin-top: 6px;
    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
    input {
      margin-top: 0; // remove the margin on top since it's on the parent
    }
  }
}

// Navbar search
.navbar-search {
  position: relative;
  float: left;
  .navbarVerticalAlign(30px); // Vertically center in navbar
  margin-bottom: 0;
  .search-query {
    margin-bottom: 0;
    padding: 4px 14px;
    #font > .sans-serif(13px, normal, 1);
    .border-radius(15px); // redeclare because of specificity of the type attribute
  }
}



// Static navbar
// -------------------------

.navbar-static-top {
  position: static;
  width: 100%;
  margin-bottom: 0; // remove 18px margin for default navbar
  .navbar-inner {
    .border-radius(0);
  }
}



// Fixed navbar
// -------------------------

// Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: @zindexFixedNavbar;
  margin-bottom: 0; // remove 18px margin for default navbar
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
  .navbar-inner {
    border: 0;
  }
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left:  0;
  padding-right: 0;
  .border-radius(0);
}

// Reset container width
// Required here as we reset the width earlier on and the grid mixins don't override early enough
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  #grid > .core > .span(@gridColumns);
}

// Fixed to top
.navbar-fixed-top {
  top: 0;
}
.navbar-fixed-top,
.navbar-static-top {
  .navbar-inner {
    .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
  }
}

// Fixed to bottom
.navbar-fixed-bottom {
  bottom: 0;
  .navbar-inner {
    .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
  }
}



// NAVIGATION
// ----------

.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
  float: right; // redeclare due to specificity
}
.navbar .nav > li {
  float: left;
}

// Links
.navbar .nav > li > a {
  float: none;
  // Vertically center the text given @navbarHeight
  padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
  color: @navbarLinkColor;
  text-decoration: none;
  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}
.navbar .nav .dropdown-toggle .caret {
  margin-top: 8px;
}

// Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
  color: @navbarLinkColorHover;
  text-decoration: none;
}

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: @navbarLinkColorActive;
  text-decoration: none;
  background-color: @navbarLinkBackgroundActive;
  -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
          box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
}

// Navbar button for toggling navbar items in responsive layouts
// These definitions need to come after '.navbar .btn'
.navbar .btn-navbar {
  display: none;
  float: right;
  padding: 7px 10px;
  margin-left: 5px;
  margin-right: 5px;
  .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
}
.navbar .btn-navbar .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #f5f5f5;
  .border-radius(1px);
  .box-shadow(0 1px 0 rgba(0,0,0,.25));
}
.btn-navbar .icon-bar + .icon-bar {
  margin-top: 3px;
}



// Dropdown menus
// --------------

// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
  &:before {
    content: '';
    display: inline-block;
    border-left:   7px solid transparent;
    border-right:  7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: @dropdownBorder;
    position: absolute;
    top: -7px;
    left: 9px;
  }
  &:after {
    content: '';
    display: inline-block;
    border-left:   6px solid transparent;
    border-right:  6px solid transparent;
    border-bottom: 6px solid @dropdownBackground;
    position: absolute;
    top: -6px;
    left: 10px;
  }
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {
  &:before {
    border-top: 7px solid #ccc;
    border-top-color: @dropdownBorder;
    border-bottom: 0;
    bottom: -7px;
    top: auto;
  }
  &:after {
    border-top: 6px solid @dropdownBackground;
    border-bottom: 0;
    bottom: -6px;
    top: auto;
  }
}

// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: @navbarLinkBackgroundActive;
  color: @navbarLinkColorActive;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: @navbarLinkColor;
  border-bottom-color: @navbarLinkColor;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: @navbarLinkColorActive;
  border-bottom-color: @navbarLinkColorActive;
}

// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
  left: auto;
  right: 0;
  &:before {
    left: auto;
    right: 12px;
  }
  &:after {
    left: auto;
    right: 13px;
  }
  .dropdown-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -1px;
    .border-radius(6px 0 6px 6px);
  }
}


// Inverted navbar
// -------------------------

.navbar-inverse {
  color: @navbarInverseText;

  .navbar-inner {
    #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
    border-color: @navbarInverseBorder;
  }

  .brand,
  .nav > li > a {
    color: @navbarInverseLinkColor;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    &:hover {
      color: @navbarInverseLinkColorHover;
    }
  }

  .nav > li > a:focus,
  .nav > li > a:hover {
    background-color: @navbarInverseLinkBackgroundHover;
    color: @navbarInverseLinkColorHover;
  }

  .nav .active > a,
  .nav .active > a:hover,
  .nav .active > a:focus {
    color: @navbarInverseLinkColorActive;
    background-color: @navbarInverseLinkBackgroundActive;
  }

  // Inline text links
  .navbar-link {
    color: @navbarInverseLinkColor;
    &:hover {
      color: @navbarInverseLinkColorHover;
    }
  }

  // Dividers in navbar
  .divider-vertical {
    border-left-color: @navbarInverseBackground;
    border-right-color: @navbarInverseBackgroundHighlight;
  }

  // Dropdowns
  .nav li.dropdown.open > .dropdown-toggle,
  .nav li.dropdown.active > .dropdown-toggle,
  .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: @navbarInverseLinkBackgroundActive;
    color: @navbarInverseLinkColorActive;
  }
  .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: @navbarInverseLinkColor;
    border-bottom-color: @navbarInverseLinkColor;
  }
  .nav li.dropdown.open > .dropdown-toggle .caret,
  .nav li.dropdown.active > .dropdown-toggle .caret,
  .nav li.dropdown.open.active > .dropdown-toggle .caret {
    border-top-color: @navbarInverseLinkColorActive;
    border-bottom-color: @navbarInverseLinkColorActive;
  }

  // Navbar search
  .navbar-search {
    .search-query {
      color: @white;
      background-color: @navbarInverseSearchBackground;
      border-color: @navbarInverseSearchBorder;
      .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
      .transition(none);
      .placeholder(@navbarInverseSearchPlaceholderColor);

      // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
      &:focus,
      &.focused {
        padding: 5px 15px;
        color: @grayDark;
        text-shadow: 0 1px 0 @white;
        background-color: @navbarInverseSearchBackgroundFocus;
        border: 0;
        .box-shadow(0 0 3px rgba(0,0,0,.15));
        outline: 0;
      }
    }
  }

  // Navbar collapse button
  .btn-navbar {
    .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
  }

}



//
// Breadcrumbs
// --------------------------------------------------


.breadcrumb {
  padding: 8px 15px;
  margin: 0 0 @baseLineHeight;
  list-style: none;
  background-color: #f5f5f5;
  .border-radius(4px);
  li {
    display: inline-block;
    .ie7-inline-block();
    text-shadow: 0 1px 0 @white;
  }
  .divider {
    padding: 0 5px;
    color: #ccc;
  }
  .active {
    color: @grayLight;
  }
}
//
// Pagination (multiple pages)
// --------------------------------------------------


.pagination {
  height: @baseLineHeight * 2;
  margin: @baseLineHeight 0;
 }
.pagination ul {
  display: inline-block;
  .ie7-inline-block();
  margin-left: 0;
  margin-bottom: 0;
  .border-radius(3px);
  .box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination li {
    display: inline;
  }
.pagination a,
.pagination span {
  float: left;
  padding: 0 14px;
  line-height: (@baseLineHeight * 2) - 2;
  text-decoration: none;
  background-color: @paginationBackground;
  border: 1px solid @paginationBorder;
  border-left-width: 0;
}
.pagination a:hover,
.pagination .active a,
.pagination .active span {
  background-color: #f5f5f5;
}
.pagination .active a,
.pagination .active span {
  color: @grayLight;
  cursor: default;
}
.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
  color: @grayLight;
  background-color: transparent;
  cursor: default;
}
.pagination li:first-child a,
.pagination li:first-child span {
  border-left-width: 1px;
  .border-radius(3px 0 0 3px);
}
.pagination li:last-child a,
.pagination li:last-child span {
  .border-radius(0 3px 3px 0);
}

// Centered
.pagination-centered {
  text-align: center;
}
.pagination-right {
  text-align: right;
}
//
// Pager pagination
// --------------------------------------------------


.pager {
  margin: @baseLineHeight 0;
  list-style: none;
  text-align: center;
  .clearfix();
}
.pager li {
  display: inline;
}
.pager a {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  .border-radius(15px);
}
.pager a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}
.pager .next a {
  float: right;
}
.pager .previous a {
  float: left;
}
.pager .disabled a,
.pager .disabled a:hover {
  color: @grayLight;
  background-color: #fff;
  cursor: default;
}//
// Modals
// --------------------------------------------------


// Recalculate z-index where appropriate
.modal-open {
  .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
  .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
  .popover       {  z-index: @zindexPopover  + @zindexModal; }
  .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
}

// Background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindexModalBackdrop;
  background-color: @black;
  // Fade for backdrop
  &.fade { opacity: 0; }
}

.modal-backdrop,
.modal-backdrop.fade.in {
  .opacity(80);
}

// Base modal
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: @zindexModal;
  overflow: auto;
  width: 560px;
  margin: -250px 0 0 -280px;
  background-color: @white;
  border: 1px solid #999;
  border: 1px solid rgba(0,0,0,.3);
  *border: 1px solid #999; /* IE6-7 */
  .border-radius(6px);
  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
  .background-clip(padding-box);
  &.fade {
    .transition(e('opacity .3s linear, top .3s ease-out'));
    top: -25%;
  }
  &.fade.in { top: 50%; }
}
.modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
  // Close icon
  .close { margin-top: 2px; }
  // Heading
  h3 {
    margin: 0;
    line-height: 30px;
  }
}

// Body (where all modal content resides)
.modal-body {
  overflow-y: auto;
  max-height: 400px;
  padding: 15px;
}
// Remove bottom margin if need be
.modal-form {
  margin-bottom: 0;
}

// Footer (for actions)
.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right; // right align buttons
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  .border-radius(0 0 6px 6px);
  .box-shadow(inset 0 1px 0 @white);
  .clearfix(); // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
}
//
// Tooltips
// --------------------------------------------------


// Base class
.tooltip {
  position: absolute;
  z-index: @zindexTooltip;
  display: block;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  .opacity(0);
  &.in     { .opacity(80); }
  &.top    { margin-top:  -3px; }
  &.right  { margin-left:  3px; }
  &.bottom { margin-top:   3px; }
  &.left   { margin-left: -3px; }
}

// Wrapper for the tooltip content
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: @tooltipColor;
  text-align: center;
  text-decoration: none;
  background-color: @tooltipBackground;
  .border-radius(4px);
}

// Arrows
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip {
  &.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
    border-top-color: @tooltipArrowColor;
  }
  &.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
    border-right-color: @tooltipArrowColor;
  }
  &.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
    border-left-color: @tooltipArrowColor;
  }
  &.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -@tooltipArrowWidth;
    border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
    border-bottom-color: @tooltipArrowColor;
  }
}
//
// Popovers
// --------------------------------------------------


.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindexPopover;
  display: none;
  width: 236px;
  padding: 1px;
  background-color: @popoverBackground;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));

  // Offset the popover to account for the popover arrow
  &.top     { margin-bottom: 10px; }
  &.right   { margin-left: 10px; }
  &.bottom  { margin-top: 10px; }
  &.left    { margin-right: 10px; }

}

.popover-title {
  margin: 0; // reset heading margin
  padding: 8px 14px;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: @popoverTitleBackground;
  border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
  .border-radius(5px 5px 0 0);
}

.popover-content {
  padding: 9px 14px;
  p, ul, ol {
    margin-bottom: 0;
  }
}

// Arrows
.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover .arrow:after {
  content: "";
  z-index: -1;
}

.popover {
  &.top .arrow {
    bottom: -@popoverArrowWidth;
    left: 50%;
    margin-left: -@popoverArrowWidth;
    border-width: @popoverArrowWidth @popoverArrowWidth 0;
    border-top-color: @popoverArrowColor;
    &:after {
      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
      border-top-color: @popoverArrowOuterColor;
      bottom: -1px;
      left: -@popoverArrowOuterWidth;
    }
  }
  &.right .arrow {
    top: 50%;
    left: -@popoverArrowWidth;
    margin-top: -@popoverArrowWidth;
    border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
    border-right-color: @popoverArrowColor;
    &:after {
      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
      border-right-color: @popoverArrowOuterColor;
      bottom: -@popoverArrowOuterWidth;
      left: -1px;
    }
  }
  &.bottom .arrow {
    top: -@popoverArrowWidth;
    left: 50%;
    margin-left: -@popoverArrowWidth;
    border-width: 0 @popoverArrowWidth @popoverArrowWidth;
    border-bottom-color: @popoverArrowColor;
    &:after {
      border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
      border-bottom-color: @popoverArrowOuterColor;
      top: -1px;
      left: -@popoverArrowOuterWidth;
    }
  }
  &.left .arrow {
    top: 50%;
    right: -@popoverArrowWidth;
    margin-top: -@popoverArrowWidth;
    border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
    border-left-color: @popoverArrowColor;
    &:after {
      border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
      border-left-color: @popoverArrowOuterColor;
      bottom: -@popoverArrowOuterWidth;
      right: -1px;
    }
  }
}
//
// Thumbnails
// --------------------------------------------------


// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files

// Make wrapper ul behave like the grid
.thumbnails {
  margin-left: -@gridGutterWidth;
  list-style: none;
  .clearfix();
}
// Fluid rows have no left margin
.row-fluid .thumbnails {
  margin-left: 0;
}

// Float li to make thumbnails appear in a row
.thumbnails > li {
  float: left; // Explicity set the float since we don't require .span* classes
  margin-bottom: @baseLineHeight;
  margin-left: @gridGutterWidth;
}

// The actual thumbnail (can be `a` or `div`)
.thumbnail {
  display: block;
  padding: 4px;
  line-height: @baseLineHeight;
  border: 1px solid #ddd;
  .border-radius(4px);
  .box-shadow(0 1px 3px rgba(0,0,0,.055));
  .transition(all .2s ease-in-out);
}
// Add a hover state for linked versions only
a.thumbnail:hover {
  border-color: @linkColor;
  .box-shadow(0 1px 4px rgba(0,105,214,.25));
}

// Images and captions
.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.thumbnail .caption {
  padding: 9px;
  color: @gray;
}
//
// Labels and badges
// --------------------------------------------------


// Base classes
.label,
.badge {
  font-size: @baseFontSize * .846;
  font-weight: bold;
  line-height: 14px; // ensure proper line-height if floated
  color: @white;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  background-color: @grayLight;
}
// Set unique padding and border-radii
.label {
  padding: 1px 4px 2px;
  .border-radius(3px);
}
.badge {
  padding: 1px 9px 2px;
  .border-radius(9px);
}

// Hover state, but only for links
a {
  &.label:hover,
  &.badge:hover {
    color: @white;
    text-decoration: none;
    cursor: pointer;
  }
}

// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label,
.badge {
  // Important (red)
  &-important         { background-color: @errorText; }
  &-important[href]   { background-color: darken(@errorText, 10%); }
  // Warnings (orange)
  &-warning           { background-color: @orange; }
  &-warning[href]     { background-color: darken(@orange, 10%); }
  // Success (green)
  &-success           { background-color: @successText; }
  &-success[href]     { background-color: darken(@successText, 10%); }
  // Info (turquoise)
  &-info              { background-color: @infoText; }
  &-info[href]        { background-color: darken(@infoText, 10%); }
  // Inverse (black)
  &-inverse           { background-color: @grayDark; }
  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
}

// Quick fix for labels/badges in buttons
.btn {
  .label,
  .badge {
    position: relative;
    top: -1px;
  }
}
.btn-mini {
  .label,
  .badge {
    top: 0;
  }
}
//
// Progress bars
// --------------------------------------------------


// ANIMATIONS
// ----------

// Webkit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Firefox
@-moz-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// IE9
@-ms-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Opera
@-o-keyframes progress-bar-stripes {
  from  { background-position: 0 0; }
  to    { background-position: 40px 0; }
}

// Spec
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}



// THE BARS
// --------

// Outer container
.progress {
  overflow: hidden;
  height: @baseLineHeight;
  margin-bottom: @baseLineHeight;
  #gradient > .vertical(#f5f5f5, #f9f9f9);
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  .border-radius(4px);
}

// Bar of progress
.progress .bar {
  width: 0%;
  height: 100%;
  color: @white;
  float: left;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  #gradient > .vertical(#149bdf, #0480be);
  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  .box-sizing(border-box);
  .transition(width .6s ease);
}
.progress .bar + .bar {
  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
}

// Striped bars
.progress-striped .bar {
  #gradient > .striped(#149bdf);
  .background-size(40px 40px);
}

// Call animation for the active one
.progress.active .bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}



// COLORS
// ------

// Danger (red)
.progress-danger .bar, .progress .bar-danger {
  #gradient > .vertical(#ee5f5b, #c43c35);
}
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
  #gradient > .striped(#ee5f5b);
}

// Success (green)
.progress-success .bar, .progress .bar-success {
  #gradient > .vertical(#62c462, #57a957);
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
  #gradient > .striped(#62c462);
}

// Info (teal)
.progress-info .bar, .progress .bar-info {
  #gradient > .vertical(#5bc0de, #339bb9);
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
  #gradient > .striped(#5bc0de);
}

// Warning (orange)
.progress-warning .bar, .progress .bar-warning {
  #gradient > .vertical(lighten(@orange, 15%), @orange);
}
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
  #gradient > .striped(lighten(@orange, 15%));
}
//
// Accordion
// --------------------------------------------------


// Parent container
.accordion {
  margin-bottom: @baseLineHeight;
}

// Group == heading + body
.accordion-group {
  margin-bottom: 2px;
  border: 1px solid #e5e5e5;
  .border-radius(4px);
}
.accordion-heading {
  border-bottom: 0;
}
.accordion-heading .accordion-toggle {
  display: block;
  padding: 8px 15px;
}

// General toggle styles
.accordion-toggle {
  cursor: pointer;
}

// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
  padding: 9px 15px;
  border-top: 1px solid #e5e5e5;
}
//
// Carousel
// --------------------------------------------------


.carousel {
  position: relative;
  margin-bottom: @baseLineHeight;
  line-height: 1;
}

.carousel-inner {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel {

  .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
  }

  // Account for jankitude on images
  .item > img {
    display: block;
    line-height: 1;
  }

  .active,
  .next,
  .prev { display: block; }

  .active {
    left: 0;
  }

  .next,
  .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }

  .next {
    left: 100%;
  }
  .prev {
    left: -100%;
  }
  .next.left,
  .prev.right {
    left: 0;
  }

  .active.left {
    left: -100%;
  }
  .active.right {
    left: 100%;
  }

}

// Left/right controls for nav
// ---------------------------

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: @white;
  text-align: center;
  background: @grayDarker;
  border: 3px solid @white;
  .border-radius(23px);
  .opacity(50);

  // we can't have this transition here
  // because webkit cancels the carousel
  // animation if you trip this while
  // in the middle of another animation
  // ;_;
  // .transition(opacity .2s linear);

  // Reposition the right one
  &.right {
    left: auto;
    right: 15px;
  }

  // Hover state
  &:hover {
    color: @white;
    text-decoration: none;
    .opacity(90);
  }
}


// Caption for text below images
// -----------------------------

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  background: @grayDark;
  background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
  color: @white;
  line-height: @baseLineHeight;
}
.carousel-caption h4 {
  margin: 0 0 5px;
}
.carousel-caption p {
  margin-bottom: 0;
}
//
// Hero unit
// --------------------------------------------------


.hero-unit {
  padding: 60px;
  margin-bottom: 30px;
  background-color: @heroUnitBackground;
  .border-radius(6px);
  h1 {
    margin-bottom: 0;
    font-size: 60px;
    line-height: 1;
    color: @heroUnitHeadingColor;
    letter-spacing: -1px;
  }
  p {
    font-size: 18px;
    font-weight: 200;
    line-height: @baseLineHeight * 1.5;
    color: @heroUnitLeadColor;
  }
}
//
// Utility classes
// --------------------------------------------------


// Quick floats
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}

// Toggling content
.hide {
  display: none;
}
.show {
  display: block;
}

// Visibility
.invisible {
  visibility: hidden;
}

// For Affix plugin
.affix {
  position: fixed;
}
background, link color hover	#DEE7EE #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
nav background hover, nav tabs borders	#BEBBAF #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
navbar link color, placeholder text	#AC8F6A #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
link color within dropdown	#8A7056 #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
link color, primary button background	#6E6352 #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
text color, btn text color, navbar background	#4D4137 #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
modal backdrop & tooltip & popover background	#131415 #DEE7EE #BEBBAF #AC8F6A #8A7056 #6E6352 #4D4137 #131415
Lavish, Bootstrap like a King

Step1: Provide an image

Step 2: Customize everything

Step 3: Get the code

CSS

LESS

Want more samples?
