/*!
 * Bootstrap @VERSION
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 * Date: @DATE
 */

// CSS Reset
/* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


// ERIC MEYER RESET
// --------------------------------------------------

html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }


// Normalize.css
// Pulling in select resets form the normalize.css project
// --------------------------------------------------

// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
  outline: thin dotted;
}
// Hover & Active
a:hover,
a:active {
  outline: 0;
}

// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

// Display block in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio:not([controls]) {
    display: none;
}

// Prevents sub and sup affecting line-height in all browsers
// -------------------------
// Source: http://github.com/necolas/normalize.css
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

// Img border in a's and image quality
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

// Forms
// -------------------------
// Source: http://github.com/necolas/normalize.css

// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
button,
input {
  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
  *overflow: visible; // Inner spacing ie IE6/7
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  border: 0;
  padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; // Cursors on all buttons applied consistently
  -webkit-appearance: button; // Style clicable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  -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
}

// Core variables and mixins
/* Mixins.less
 * Snippets of reusable CSS to develop faster and keep code readable
 * ----------------------------------------------------------------- */


// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    zoom: 1;
  }
  &:after {
    clear: both;
  }
}

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

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

// Input placeholder text
.placeholder(@color: @grayLight) {
  :-moz-placeholder {
    color: @color;
  }
  ::-webkit-input-placeholder {
    color: @color;
  }
}

// Font Stacks
#font {
  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Georgia", Times New Roman, Times, serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
    font-family: "Monaco", Courier New, monospace;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
}

// Grid System
.fixed-container() {
  width: @siteWidth;
  margin-left: auto;
  margin-right: auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
  display: inline;
  float: left;
  margin-left: @gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
  .gridColumn();
  .columns(@columnSpan);
}

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

// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

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

// Background clipping
.background-clip(@clip) {
  -webkit-background-clip: @clip;
     -moz-background-clip: @clip;
          background-clip: @clip;
}

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

// Make any element resizable for prototyping
.resizable(@direction: both) {
  resize: @direction; // Options are horizontal, vertical, both
  overflow: auto; // Safari fix
}

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#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 allerts
.gradientBar(@primaryColor, @secondaryColor) {
  #gradient > .vertical(@primaryColor, @secondaryColor);
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}

// Gradients
#gradient {
  .horizontal (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
  }
}

// Reset filters for IE
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

// Opacity
.opacity(@opacity: 100) {
  filter: e(%("alpha(opacity=%d)", @opacity));
  -khtml-opacity: @opacity / 100;
    -moz-opacity: @opacity / 100;
         opacity: @opacity / 100;
}

// Grid system and page structure
/*
 * Scaffolding
 * Basic and global styles for generating a grid system, structural layout, and page templates
 * ------------------------------------------------------------------------------------------- */


// STRUCTURAL LAYOUT
// -----------------

body {
  background-color: @white;
  margin: 0;
  #font > .sans-serif(normal,@basefont,@baseline);
  color: @grayDark;
}

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

// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
  position: relative;
  min-width: 940px;
  padding-left: 20px;
  padding-right: 20px;
  .clearfix();
  > .sidebar {
    position: absolute;
    top: 0;
    left: 20px;
    width: 220px;
  }
  // TODO in v2: rename this and .popover .content to be more specific
  > .content {
    margin-left: 240px;
  }
}


// BASE STYLES
// -----------

// Links
a {
  color: @linkColor;
  text-decoration: none;
  line-height: inherit;
  font-weight: inherit;
  &:hover {
    color: @linkColorHover;
    text-decoration: underline;
  }
}

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

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


// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there

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

// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea
.row > [class*="span"] {
  .gridColumn();
}

// Default columns
.span1     { .columns(1); }
.span2     { .columns(2); }
.span3     { .columns(3); }
.span4     { .columns(4); }
.span5     { .columns(5); }
.span6     { .columns(6); }
.span7     { .columns(7); }
.span8     { .columns(8); }
.span9     { .columns(9); }
.span10    { .columns(10); }
.span11    { .columns(11); }
.span12    { .columns(12); }
.span13    { .columns(13); }
.span14    { .columns(14); }
.span15    { .columns(15); }
.span16    { .columns(16); }

// For optional 24-column grid
.span17    { .columns(17); }
.span18    { .columns(18); }
.span19    { .columns(19); }
.span20    { .columns(20); }
.span21    { .columns(21); }
.span22    { .columns(22); }
.span23    { .columns(23); }
.span24    { .columns(24); }

// Offset column options
.row {
  > .offset1   { .offset(1); }
  > .offset2   { .offset(2); }
  > .offset3   { .offset(3); }
  > .offset4   { .offset(4); }
  > .offset5   { .offset(5); }
  > .offset6   { .offset(6); }
  > .offset7   { .offset(7); }
  > .offset8   { .offset(8); }
  > .offset9   { .offset(9); }
  > .offset10  { .offset(10); }
  > .offset11  { .offset(11); }
  > .offset12  { .offset(12); }
}

// Unique column sizes for 16-column grid
.span-one-third     { width: 300px; }
.span-two-thirds    { width: 620px; }
.offset-one-third   { margin-left: 340px; }
.offset-two-thirds  { margin-left: 660px; }


// Styled patterns and elements
/* Typography.less
 * Headings, body text, lists, code, and more for a versatile and durable typography system
 * ---------------------------------------------------------------------------------------- */


// BODY TEXT
// ---------

p {
  #font > .shorthand(normal,@basefont,@baseline);
  margin-bottom: @baseline / 2;
  small {
    font-size: @basefont - 2;
    color: @grayLight;
  }
}


// HEADINGS
// --------

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: @grayDark;
  small {
    color: @grayLight;
  }
}
h1 {
  margin-bottom: @baseline;
  font-size: 30px;
  line-height: @baseline * 2;
  small {
    font-size: 18px;
  }
}
h2 {
  font-size: 24px;
  line-height: @baseline * 2;
  small {
    font-size: 14px;
  }
}
h3, h4, h5, h6 {
  line-height: @baseline * 2;
}
h3 {
  font-size: 18px;
  small {
    font-size: 14px;
  }
}
h4 {
  font-size: 16px;
  small {
    font-size: 12px;
  }
}
h5 {
  font-size: 14px;
}
h6 {
  font-size: 13px;
  color: @grayLight;
  text-transform: uppercase;
}


// COLORS
// ------

// Unordered and Ordered lists
ul, ol {
  margin: 0 0 @baseline 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
ul {
  list-style: disc;
}
ol {
  list-style: decimal;
}
li {
  line-height: @baseline;
  color: @gray;
}
ul.unstyled {
  list-style: none;
  margin-left: 0;
}

// Description Lists
dl {
  margin-bottom: @baseline;
  dt, dd {
    line-height: @baseline;
  }
  dt {
    font-weight: bold;
  }
  dd {
    margin-left: @baseline / 2;
  }
}

// MISC
// ----

// Horizontal rules
hr {
  margin: 20px 0 19px;
  border: 0;
  border-bottom: 1px solid #eee;
}

// Emphasis
strong {
  font-style: inherit;
  font-weight: bold;
}
em {
  font-style: italic;
  font-weight: inherit;
  line-height: inherit;
}
.muted {
  color: @grayLight;
}

// Blockquotes
blockquote {
  margin-bottom: @baseline;
  border-left: 5px solid #eee;
  padding-left: 15px;
  p {
    #font > .shorthand(300,14px,@baseline);
    margin-bottom: 0;
  }
  small {
    display: block;
    #font > .shorthand(300,12px,@baseline);
    color: @grayLight;
    &:before {
      content: '\2014 \00A0';
    }
  }
}

// Addresses
address {
  display: block;
  line-height: @baseline;
  margin-bottom: @baseline;
}

// Inline and block code styles
code, pre {
  padding: 0 3px 2px;
  font-family: Monaco, Andale Mono, Courier New, monospace;
  font-size: 12px;
  .border-radius(3px);
}
code {
  background-color: lighten(@orange, 40%);
  color: rgba(0,0,0,.75);
  padding: 1px 3px;
}
pre {
  background-color: #f5f5f5;
  display: block;
  padding: (@baseline - 1) / 2;
  margin: 0 0 @baseline;
  line-height: @baseline;
  font-size: 12px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  .border-radius(3px);
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;

}
/* Forms.less
 * Base styles for various input types, form layouts, and states
 * ------------------------------------------------------------- */


// FORM STYLES
// -----------

form {
  margin-bottom: @baseline;
}

// Groups of fields with labels on top (legends)
fieldset {
  margin-bottom: @baseline;
  padding-top: @baseline;
  legend {
    display: block;
    padding-left: 150px;
    font-size: @basefont * 1.5;
    line-height: 1;
    color: @grayDark;
    *padding: 0 0 5px 145px; /* IE6-7 */
    *line-height: 1.5; /* IE6-7 */
  }
}

// Parent element that clears floats and wraps labels and fields together
form .clearfix {
  margin-bottom: @baseline;
  .clearfix()
}

// Set font for forms
label,
input,
select,
textarea {
  #font > .sans-serif(normal,13px,normal);
}

// Float labels left
label {
  padding-top: 6px;
  font-size: @basefont;
  line-height: @baseline;
  float: left;
  width: 130px;
  text-align: right;
  color: @grayDark;
}

// Shift over the inside div to align all label's relevant content
form .input {
  margin-left: 150px;
}

// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
  cursor: pointer;
}

// Inputs, Textareas, Selects
input,
textarea,
select,
.uneditable-input {
  display: inline-block;
  width: 210px;
  height: @baseline;
  padding: 4px;
  font-size: @basefont;
  line-height: @baseline;
  color: @gray;
  border: 1px solid #ccc;
  .border-radius(3px);
}

// remove padding from select
select {
  padding: initial;
}

// mini reset for non-html5 file types
input[type=checkbox],
input[type=radio] {
  width: auto;
  height: auto;
  padding: 0;
  margin: 3px 0;
  *margin-top: 0; /* IE6-7 */
  line-height: normal;
  border: none;
}

input[type=file] {
  background-color: @white;
  padding: initial;
  border: initial;
  line-height: initial;
  .box-shadow(none);
}

input[type=button],
input[type=reset],
input[type=submit] {
  width: auto;
  height: auto;
}

select,
input[type=file] {
  height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
  *height: auto; // Reset for IE7
  line-height: @baseline * 1.5;
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
}

// Make multiple select elements height not fixed
select[multiple] {
  height: inherit;
  background-color: @white; // Fixes Chromium bug of unreadable items
}

textarea {
  height: auto;
}

// For text that needs to appear as an input but should not be an input
.uneditable-input {
  background-color: @white;
  display: block;
  border-color: #eee;
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
  cursor: not-allowed;
}

// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
  color: @grayLight;
}
::-webkit-input-placeholder {
  color: @grayLight;
}

// Focus states
input,
textarea {
  @transition: border linear .2s, box-shadow linear .2s;
  .transition(@transition);
  .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
textarea:focus {
  outline: 0;
  border-color: rgba(82,168,236,.8);
  @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
  .box-shadow(@shadow);
}
input[type=file]:focus,
input[type=checkbox]:focus,
select:focus {
  .box-shadow(none); // override for file inputs
  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
}


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

// 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
  input,
  textarea {
    color: @textColor;
    border-color: @borderColor;
    &:focus {
      border-color: darken(@borderColor, 10%);
      .box-shadow(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;
  }
}
// Error
form .clearfix.error {
  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
}
// Warning
form .clearfix.warning {
  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
}
// Success
form .clearfix.success {
  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
}


// Form element sizes
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini,
input.mini,
textarea.mini,
select.mini {
  width: 60px;
}
.input-small,
input.small,
textarea.small,
select.small {
  width: 90px;
}
.input-medium,
input.medium,
textarea.medium,
select.medium {
  width: 150px;
}
.input-large,
input.large,
textarea.large,
select.large {
  width: 210px;
}
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
  width: 270px;
}
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
  width: 530px;
}
textarea.xxlarge {
  overflow-y: auto;
}

// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
  display: inline-block;
  float: none;
  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
  margin-left: 0;
}
input,
textarea {
  // Default columns
  &.span1     { .formColumns(1); }
  &.span2     { .formColumns(2); }
  &.span3     { .formColumns(3); }
  &.span4     { .formColumns(4); }
  &.span5     { .formColumns(5); }
  &.span6     { .formColumns(6); }
  &.span7     { .formColumns(7); }
  &.span8     { .formColumns(8); }
  &.span9     { .formColumns(9); }
  &.span10    { .formColumns(10); }
  &.span11    { .formColumns(11); }
  &.span12    { .formColumns(12); }
  &.span13    { .formColumns(13); }
  &.span14    { .formColumns(14); }
  &.span15    { .formColumns(15); }
  &.span16    { .formColumns(16); }
}

// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
}

// Actions (the buttons)
.actions {
  background: #f5f5f5;
  margin-top: @baseline;
  margin-bottom: @baseline;
  padding: (@baseline - 1) 20px @baseline 150px;
  border-top: 1px solid #ddd;
  .border-radius(0 0 3px 3px);
  .secondary-action {
    float: right;
    a {
      line-height: 30px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// Help Text
// TODO: Do we need to set basefont and baseline here?
.help-inline,
.help-block {
  font-size: @basefont;
  line-height: @baseline;
  color: @grayLight;
}
.help-inline {
  padding-left: 5px;
  *position: relative; /* IE6-7 */
  *top: -5px; /* IE6-7 */
}

// Big blocks of help text
.help-block {
  display: block;
  max-width: 600px;
}

// Inline Fields (input fields that appear as inline objects
.inline-inputs {
  color: @gray;
  span {
    padding: 0 2px 0 1px;
  }
}

// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
  input {
    .border-radius(0 3px 3px 0);
  }
  .add-on {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ccc;
    z-index: 2;
    float: left;
    display: block;
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 4px 4px 4px 5px;
    margin-right: -1px;
    font-weight: normal;
    line-height: 18px;
    color: @grayLight;
    text-align: center;
    text-shadow: 0 1px 0 @white;
    .border-radius(3px 0 0 3px);
  }
  .active {
    background: lighten(@green, 30);
    border-color: @green;
  }
}
.input-prepend {
  .add-on {
    *margin-top: 1px; /* IE6-7 */
  }
}
.input-append {
  input {
    float: left;
    .border-radius(3px 0 0 3px);
  }
  .add-on {
    .border-radius(0 3px 3px 0);
    margin-right: 0;
    margin-left: -1px;
  }
}

// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
  margin: 0 0 5px;
  width: 100%;
  li {
    display: block;
    padding: 0;
    width: 100%;
  }
  label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin-left: 20px;
    line-height: @baseline;
    text-align: left;
    white-space: normal;
    strong {
      color: @gray;
    }
    small {
      font-size: @basefont - 2;
      font-weight: normal;
    }
  }
  .inputs-list {
    margin-left: 25px;
    margin-bottom: 10px;
    padding-top: 0;
  }
  &:first-child {
    padding-top: 6px;
  }
  li + li {
    padding-top: 2px;
  }
  input[type=radio],
  input[type=checkbox] {
    margin-bottom: 0;
    margin-left: -20px;
    float: left;
  }
}

// Stacked forms
.form-stacked {
  padding-left: 20px;
  fieldset {
    padding-top: @baseline / 2;
  }
  legend {
    padding-left: 0;
  }
  label {
    display: block;
    float: none;
    width: auto;
    font-weight: bold;
    text-align: left;
    line-height: 20px;
    padding-top: 0;
  }
  .clearfix {
    margin-bottom: @baseline / 2;
    div.input {
      margin-left: 0;
    }
  }
  .inputs-list {
    margin-bottom: 0;
    li {
      padding-top: 0;
      label {
        font-weight: normal;
        padding-top: 0;
      }
    }
  }
  div.clearfix.error {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 0;
    margin-left: -10px;
  }
  .actions {
    margin-left: -20px;
    padding-left: 20px;
  }
}


/*
 * Tables.less
 * Tables for, you guessed it, tabular data
 * ---------------------------------------- */


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

table {
  width: 100%;
  margin-bottom: @baseline;
  padding: 0;
  font-size: @basefont;
  border-collapse: collapse;
  th,
  td {
    padding: 10px 10px 9px;
    line-height: @baseline;
    text-align: left;
  }
  th {
    padding-top: 9px;
    font-weight: bold;
    vertical-align: middle;
  }
  td {
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  // When scoped to row, fix th in tbody
  tbody th {
    border-top: 1px solid #ddd;
    vertical-align: top;
  }
}


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


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

.bordered-table {
  border: 1px solid #ddd;
  border-collapse: separate; // Done so we can round those corners!
  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
  .border-radius(4px);
  th + th,
  td + td,
  th + td {
    border-left: 1px solid #ddd;
  }
  thead tr:first-child th:first-child,
  tbody tr:first-child td:first-child {
    .border-radius(4px 0 0 0);
  }
  thead tr:first-child th:last-child,
  tbody tr:first-child td:last-child {
    .border-radius(0 4px 0 0);
  }
  tbody tr:last-child td:first-child {
    .border-radius(0 0 0 4px);
  }
  tbody tr:last-child td:last-child {
    .border-radius(0 0 4px 0);
  }
}


// TABLE CELL SIZES
// ----------------

// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
.tableColumns(@columnSpan: 1) {
  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
}
table {
  // Default columns
  .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); }
}


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

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

table {
  // Tablesorting styles w/ jQuery plugin
  .header {
    cursor: pointer;
    &:after {
      content: "";
      float: right;
      margin-top: 7px;
      border-width: 0 4px 4px;
      border-style: solid;
      border-color: #000 transparent;
      visibility: hidden;
    }
  }
  // Style the sorted column headers (THs)
  .headerSortUp,
  .headerSortDown {
    background-color: rgba(141,192,219,.25);
    text-shadow: 0 1px 1px rgba(255,255,255,.75);
  }
  // Style the ascending (reverse alphabetical) column header
  .header:hover {
    &:after {
      visibility:visible;
    }
  }
  // Style the descending (alphabetical) column header
  .headerSortDown,
  .headerSortDown:hover {
    &:after {
      visibility:visible;
      .opacity(60);
    }
  }
  // Style the ascending (reverse alphabetical) column header
  .headerSortUp {
    &:after {
      border-bottom: none;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #000;
      visibility:visible;
      .box-shadow(none); //can't add boxshadow to downward facing arrow :(
      .opacity(60);
    }
  }
  // Blue Table Headings
  .blue {
    color: @blue;
    border-bottom-color: @blue;
  }
  .headerSortUp.blue,
  .headerSortDown.blue {
    background-color: lighten(@blue, 40%);
  }
  // Green Table Headings
  .green {
    color: @green;
    border-bottom-color: @green;
  }
  .headerSortUp.green,
  .headerSortDown.green {
    background-color: lighten(@green, 40%);
  }
  // Red Table Headings
  .red {
    color: @red;
    border-bottom-color: @red;
  }
  .headerSortUp.red,
  .headerSortDown.red {
    background-color: lighten(@red, 50%);
  }
  // Yellow Table Headings
  .yellow {
    color: @yellow;
    border-bottom-color: @yellow;
  }
  .headerSortUp.yellow,
  .headerSortDown.yellow {
    background-color: lighten(@yellow, 40%);
  }
  // Orange Table Headings
  .orange {
    color: @orange;
    border-bottom-color: @orange;
  }
  .headerSortUp.orange,
  .headerSortDown.orange {
    background-color: lighten(@orange, 40%);
  }
  // Purple Table Headings
  .purple {
    color: @purple;
    border-bottom-color: @purple;
  }
  .headerSortUp.purple,
  .headerSortDown.purple {
    background-color: lighten(@purple, 40%);
  }
}

/* Patterns.less
 * Repeatable UI elements outside the base styles provided from the scaffolding
 * ---------------------------------------------------------------------------- */


// TOPBAR
// ------

// Topbar for Branding and Nav
.topbar {
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  overflow: visible;

  // Links get text shadow
  a {
    color: @grayLight;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  }

  // Hover and active states
  // h3 for backwards compatibility
  h3 a:hover,
  .brand:hover,
  ul .active > a {
    background-color: #333;
    background-color: rgba(255,255,255,.05);
    color: @white;
    text-decoration: none;
  }

  // Website name
  // h3 left for backwards compatibility
  h3 {
    position: relative;
  }
  h3 a,
  .brand {
    float: left;
    display: block;
    padding: 8px 20px 12px;
    margin-left: -20px; // negative indent to left-align the text down the page
    color: @white;
    font-size: 20px;
    font-weight: 200;
    line-height: 1;
  }

  // Plain text in topbar
  p {
    margin: 0;
    line-height: 40px;
    a:hover {
      background-color: transparent;
      color: @white;
    }
  }

  // Search Form
  form {
    float: left;
    margin: 5px 0 0 0;
    position: relative;
    .opacity(100);
  }
  // Todo: remove from v2.0 when ready, added for legacy
  form.pull-right {
    float: right;
  }
  input {
    background-color: #444;
    background-color: rgba(255,255,255,.3);
    #font > .sans-serif(13px, normal, 1);
    padding: 4px 9px;
    color: @white;
    color: rgba(255,255,255,.75);
    border: 1px solid #111;
    .border-radius(4px);
    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
    .box-shadow(@shadow);
    .transition(none);

    // Placeholder text gets special styles; can't be bundled together though for some reason
    &:-moz-placeholder {
      color: @grayLighter;
    }
    &::-webkit-input-placeholder {
      color: @grayLighter;
    }
    // Hover states
    &:hover {
      background-color: @grayLight;
      background-color: rgba(255,255,255,.5);
      color: @white;
    }
    // Focus states (we use .focused since IE8 and down doesn't support :focus)
    &:focus,
    &.focused {
      outline: 0;
      background-color: @white;
      color: @grayDark;
      text-shadow: 0 1px 0 @white;
      border: 0;
      padding: 5px 10px;
      .box-shadow(0 0 3px rgba(0,0,0,.15));
    }
  }
}

// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
// For backwards compatibility, include .topbar .fill
.topbar-inner,
.topbar .fill {
  background-color: #222;
  #gradient > .vertical(#333, #222);
  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  .box-shadow(@shadow);
}


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

// Topbar Nav
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
// For backwards compatibility, leave in .topbar div > ul
.topbar div > ul,
.nav {
  display: block;
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  left: 0;
  > li {
    display: block;
    float: left;
  }
  a {
    display: block;
    float: none;
    padding: 10px 10px 11px;
    line-height: 19px;
    text-decoration: none;
    &:hover {
      color: @white;
      text-decoration: none;
    }
  }
  .active > a {
    background-color: #222;
    background-color: rgba(0,0,0,.5);
  }

  // Secondary (floated right) nav in topbar
  &.secondary-nav {
    float: right;
    margin-left: 10px;
    margin-right: 0;
    // backwards compatibility
    .menu-dropdown,
    .dropdown-menu {
      right: 0;
      border: 0;
    }
  }
  // Dropdowns within the .nav
  // a.menu:hover and li.open .menu for backwards compatibility
  a.menu:hover,
  li.open .menu,
  .dropdown-toggle:hover,
  .dropdown.open .dropdown-toggle {
    background: #444;
    background: rgba(255,255,255,.05);
  }
  // .menu-dropdown for backwards compatibility
  .menu-dropdown,
  .dropdown-menu {
    background-color: #333;
    // a.menu for backwards compatibility
    a.menu,
    .dropdown-toggle {
      color: @white;
      &.open {
        background: #444;
        background: rgba(255,255,255,.05);
      }
    }
    li a {
      color: #999;
      text-shadow: 0 1px 0 rgba(0,0,0,.5);
      &:hover {
        #gradient > .vertical(#292929,#191919);
        color: @white;
      }
    }
    .active a {
      color: @white;
    }
    .divider {
      background-color: #222;
      border-color: #444;
    }
  }
}

// For backwards compatibility with new dropdowns, redeclare dropdown link padding
.topbar ul .menu-dropdown li a,
.topbar ul .dropdown-menu li a {
  padding: 4px 15px;
}

// Dropdown Menus
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
// li.menu for backwards compatibility
li.menu,
.dropdown {
  position: relative;
}
// The link that is clicked to toggle the dropdown
// a.menu for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
  width: 0;
  height: 0;
  display: inline-block;
  content: "&darr;";
  text-indent: -99999px;
  vertical-align: top;
  margin-top: 8px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid @white;
  .opacity(50);
}
// The dropdown menu (ul)
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu {
  background-color: @white;
  float: left;
  display: none; // None by default, but block on "open" of the menu
  position: absolute;
  top: 40px;
  z-index: 900;
  min-width: 160px;
  max-width: 220px;
  _width: 160px;
  margin-left: 0; // override default ul styles
  margin-right: 0;
  padding: 6px 0;
  zoom: 1; // do we need this?
  border-color: #999;
  border-color: rgba(0,0,0,.2);
  border-style: solid;
  border-width: 0 1px 1px;
  .border-radius(0 0 6px 6px);
  .box-shadow(0 2px 4px rgba(0,0,0,.2));
  .background-clip(padding-box);

  // Unfloat any li's to make them stack
  li {
    float: none;
    display: block;
    background-color: none;
  }
  // Dividers (basically an hr) within the dropdown
  .divider {
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: #eee;
    border-bottom: 1px solid @white;
  }
}

.topbar .dropdown-menu,
.dropdown-menu {
  // Links within the dropdown menu
  a {
    display: block;
    padding: 4px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: @gray;
    text-shadow: 0 1px 0 @white;
    // Hover state
    &:hover,
    &.hover {
      #gradient > .vertical(#eeeeee, #dddddd);
      color: @grayDark;
      text-decoration: none;
      @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
      .box-shadow(@shadow);
    }
  }
}

// Open state for the dropdown
// .open for backwards compatibility
.open,
.dropdown.open {
  // .menu for backwards compatibility
  .menu,
  .dropdown-toggle {
    color: @white;
    background: #ccc;
    background: rgba(0,0,0,.3);
  }
  // .menu-dropdown for backwards compatibility
  .menu-dropdown,
  .dropdown-menu {
    display: block;
  }
}


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

// Common styles
.tabs,
.pills {
  margin: 0 0 @baseline;
  padding: 0;
  list-style: none;
  .clearfix();
  > li {
    float: left;
    > a {
      display: block;
    }
  }
}

// Tabs
.tabs {
  border-color: #ddd;
  border-style: solid;
  border-width: 0 0 1px;
  > li {
    position: relative; // For the dropdowns mostly
    margin-bottom: -1px;
    > a {
      padding: 0 15px;
      margin-right: 2px;
      line-height: (@baseline * 2) - 2;
      border: 1px solid transparent;
      .border-radius(4px 4px 0 0);
      &:hover {
        text-decoration: none;
        background-color: #eee;
        border-color: #eee #eee #ddd;
      }
    }
  }
  // Active state, and it's :hover to override normal :hover
  .active > a,
  .active > a:hover {
    color: @gray;
    background-color: @white;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default;
  }
}

// Dropdowns in tabs
.tabs {
  // first one for backwards compatibility
  .menu-dropdown,
  .dropdown-menu {
    top: 35px;
    border-width: 1px;
    .border-radius(0 6px 6px 6px);
  }
  // first one for backwards compatibility
  a.menu:after,
  .dropdown-toggle:after {
    border-top-color: #999;
    margin-top: 15px;
    margin-left: 5px;
  }
  // first one for backwards compatibility
  li.open.menu .menu,
  .open.dropdown .dropdown-toggle {
    border-color: #999;
  }
  // first one for backwards compatibility
  li.open a.menu:after,
  .dropdown.open .dropdown-toggle:after {
    border-top-color: #555;
  }
}

// Pills
.pills {
  a {
    margin: 5px 3px 5px 0;
    padding: 0 15px;
    line-height: 30px;
    text-shadow: 0 1px 1px @white;
    .border-radius(15px);
    &:hover {
      color: @white;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0,0,0,.25);
      background-color: @linkColorHover;
    }
  }
  .active a {
    color: @white;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    background-color: @linkColor;
  }
}

// Stacked pills
.pills-vertical > li {
  float: none;
}

// Tabbable areas
.tab-content,
.pill-content {
}
.tab-content > .tab-pane,
.pill-content > .pill-pane,
.tab-content > div,
.pill-content > div {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}


// BREADCRUMBS
// -----------

.breadcrumb {
  padding: 7px 14px;
  margin: 0 0 @baseline;
  #gradient > .vertical(#ffffff, #f5f5f5);
  border: 1px solid #ddd;
  .border-radius(3px);
  .box-shadow(inset 0 1px 0 @white);
  li {
    display: inline;
    text-shadow: 0 1px 0 @white;
  }
  .divider {
    padding: 0 5px;
    color: @grayLight;
  }
  .active a {
    color: @grayDark;
  }
}


// PAGE HEADERS
// ------------

.hero-unit {
  background-color: #f5f5f5;
  margin-bottom: 30px;
  padding: 60px;
  .border-radius(6px);
  h1 {
    margin-bottom: 0;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
  }
  p {
    font-size: 18px;
    font-weight: 200;
    line-height: @baseline * 1.5;
  }
}
footer {
  margin-top: @baseline - 1;
  padding-top: @baseline - 1;
  border-top: 1px solid #eee;
}


// PAGE HEADERS
// ------------

.page-header {
  margin-bottom: @baseline - 1;
  border-bottom: 1px solid #ddd;
  .box-shadow(0 1px 0 rgba(255,255,255,.5));
  h1 {
    margin-bottom: (@baseline / 2) - 1px;
  }
}


// BUTTON STYLES
// -------------

// Shared colors for buttons and alerts
.btn,
.alert-message {
  // Set text color
  &.danger,
  &.danger:hover,
  &.error,
  &.error:hover,
  &.success,
  &.success:hover,
  &.info,
  &.info:hover {
    color: @white
  }
  // Sets the close button to the middle of message
  .close{
    font-family: Arial, sans-serif;
    line-height: 18px;
  }
  // Danger and error appear as red
  &.danger,
  &.error {
    .gradientBar(#ee5f5b, #c43c35);
  }
  // Success appears as green
  &.success {
    .gradientBar(#62c462, #57a957);
  }
  // Info appears as a neutral blue
  &.info {
    .gradientBar(#5bc0de, #339bb9);
  }
}

// Base .btn styles
.btn {
  // Button Base
  cursor: pointer;
  display: inline-block;
  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
  padding: 5px 14px 6px;
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
  color: #333;
  font-size: @basefont;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  .border-radius(4px);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);

  &:hover {
    background-position: 0 -15px;
    color: #333;
    text-decoration: none;
  }

  // Focus state for keyboard and accessibility
  &:focus {
    outline: 1px dotted #666;
  }

  // Primary Button Type
  &.primary {
    color: @white;
    .gradientBar(@blue, @blueDark)
  }

   // Transitions
  .transition(.1s linear all);

  // Active and Disabled states
  &.active,
  :active {
    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
    .box-shadow(@shadow);
  }
  &.disabled {
    cursor: default;
    background-image: none;
    .reset-filter();
    .opacity(65);
    .box-shadow(none);
  }
  &[disabled] {
    // disabled pseudo can't be included with .disabled
    // def because IE8 and below will drop it ;_;
    cursor: default;
    background-image: none;
    .reset-filter();
    .opacity(65);
    .box-shadow(none);
  }

  // Button Sizes
  &.large {
    font-size: @basefont + 2px;
    line-height: normal;
    padding: 9px 14px 9px;
    .border-radius(6px);
  }
  &.small {
    padding: 7px 9px 7px;
    font-size: @basefont - 2px;
  }
}
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
:root .alert-message,
:root .btn {
  border-radius: 0 \0;
}

// Help Firefox not be a jerk about adding extra padding to buttons
button.btn,
input[type=submit].btn {
  &::-moz-focus-inner {
  	padding: 0;
  	border: 0;
  }
}


// CLOSE ICONS
// -----------
.close {
  float: right;
  color: @black;
  font-size: 20px;
  font-weight: bold;
  line-height: @baseline * .75;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  .opacity(25);
  &:hover {
    color: @black;
    text-decoration: none;
    .opacity(40);
  }
}


// ERROR STYLES
// ------------

// Base alert styles
.alert-message {
  position: relative;
  padding: 7px 15px;
  margin-bottom: @baseline;
  color: @grayDark;
  .gradientBar(#fceec1, #eedc94); // warning by default
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-width: 1px;
  border-style: solid;
  .border-radius(4px);
  .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));

  // Adjust close icon
  .close {
    margin-top: 1px;
    *margin-top: 0; // For IE7
  }

  // Make links same color as text and stand out more
  a {
    font-weight: bold;
    color: @grayDark;
  }
  &.danger p a,
  &.error p a,
  &.success p a,
  &.info p a {
    color: @white;
  }

  // Remove extra margin from content
  h5 {
    line-height: @baseline;
  }
  p {
    margin-bottom: 0;
  }
  div {
    margin-top: 5px;
    margin-bottom: 2px;
    line-height: 28px;
  }
  .btn {
    // Provide actions with buttons
    .box-shadow(0 1px 0 rgba(255,255,255,.25));
  }

  &.block-message {
    background-image: none;
    background-color: lighten(#fceec1, 5%);
    .reset-filter();
    padding: 14px;
    border-color: #fceec1;
    .box-shadow(none);
    ul, p {
      margin-right: 30px;
    }
    ul {
      margin-bottom: 0;
    }
    li {
      color: @grayDark;
    }
    .alert-actions {
      margin-top: 5px;
    }
    &.error,
    &.success,
    &.info {
      color: @grayDark;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    &.error {
      background-color: lighten(#f56a66, 25%);
      border-color: lighten(#f56a66, 20%);
    }
    &.success {
      background-color: lighten(#62c462, 30%);
      border-color: lighten(#62c462, 25%);
    }
    &.info {
      background-color: lighten(#6bd0ee, 25%);
      border-color: lighten(#6bd0ee, 20%);
    }
    // Change link color back
    &.danger p a,
    &.error p a,
    &.success p a,
    &.info p a {
      color: @grayDark;
    }

  }
}


// PAGINATION
// ----------

.pagination {
  height: @baseline * 2;
  margin: @baseline 0;
  ul {
    float: left;
    margin: 0;
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,.15);
    .border-radius(3px);
    .box-shadow(0 1px 2px rgba(0,0,0,.05));
  }
  li {
    display: inline;
  }
  a {
    float: left;
    padding: 0 14px;
    line-height: (@baseline * 2) - 2;
    border-right: 1px solid;
    border-right-color: #ddd;
    border-right-color: rgba(0,0,0,.15);
    *border-right-color: #ddd; /* IE6-7 */
    text-decoration: none;
  }
  a:hover,
  .active a {
    background-color: lighten(@blue, 45%);
  }
  .disabled a,
  .disabled a:hover {
    background-color: transparent;
    color: @grayLight;
  }
  .next a {
    border: 0;
  }
}


// WELLS
// -----

.well {
  background-color: #f5f5f5;
  margin-bottom: 20px;
  padding: 19px;
  min-height: 20px;
  border: 1px solid #eee;
  border: 1px solid rgba(0,0,0,.05);
  .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);
  }
}


// MODALS
// ------

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

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

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11000;
  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);
  .close { margin-top: 7px; }
  &.fade {
    .transition(e('opacity .3s linear, top .3s ease-out'));
    top: -25%;
  }
  &.fade.in { top: 50%; }
}
.modal-header {
  border-bottom: 1px solid #eee;
  padding: 5px 15px;
}
.modal-body {
  padding: 15px;
}
.modal-body form {
  margin-bottom: 0;
}
.modal-footer {
  background-color: #f5f5f5;
  padding: 14px 15px 15px;
  border-top: 1px solid #ddd;
  .border-radius(0 0 6px 6px);
  .box-shadow(inset 0 1px 0 @white);
  .clearfix();
  margin-bottom: 0;
  .btn {
    float: right;
    margin-left: 5px;
  }
}

// Fix the stacking of these components when in modals
.modal .popover,
.modal .twipsy {
  z-index: 12000;
}


// POPOVER ARROWS
// --------------

#popoverArrow {
  .above(@arrowWidth: 5px) {
    bottom: 0;
    left: 50%;
    margin-left: -@arrowWidth;
    border-left: @arrowWidth solid transparent;
    border-right: @arrowWidth solid transparent;
    border-top: @arrowWidth solid @black;
  }
  .left(@arrowWidth: 5px) {
    top: 50%;
    right: 0;
    margin-top: -@arrowWidth;
    border-top: @arrowWidth solid transparent;
    border-bottom: @arrowWidth solid transparent;
    border-left: @arrowWidth solid @black;
  }
  .below(@arrowWidth: 5px) {
    top: 0;
    left: 50%;
    margin-left: -@arrowWidth;
    border-left: @arrowWidth solid transparent;
    border-right: @arrowWidth solid transparent;
    border-bottom: @arrowWidth solid @black;
  }
  .right(@arrowWidth: 5px) {
    top: 50%;
    left: 0;
    margin-top: -@arrowWidth;
    border-top: @arrowWidth solid transparent;
    border-bottom: @arrowWidth solid transparent;
    border-right: @arrowWidth solid @black;
  }
}

// TWIPSY
// ------

.twipsy {
  display: block;
  position: absolute;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  z-index: 1000;
  .opacity(80);
  &.fade.in {
    .opacity(80);
  }
  &.above .twipsy-arrow   { #popoverArrow > .above(); }
  &.left .twipsy-arrow    { #popoverArrow > .left(); }
  &.below .twipsy-arrow   { #popoverArrow > .below(); }
  &.right .twipsy-arrow   { #popoverArrow > .right(); }
}
.twipsy-inner {
  padding: 3px 8px;
  background-color: @black;
  color: white;
  text-align: center;
  max-width: 200px;
  text-decoration: none;
  .border-radius(4px);
}
.twipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
}


// POPOVERS
// --------

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 5px;
  display: none;
  &.above .arrow { #popoverArrow > .above(); }
  &.right .arrow { #popoverArrow > .right(); }
  &.below .arrow { #popoverArrow > .below(); }
  &.left .arrow  { #popoverArrow > .left(); }
  .arrow {
    position: absolute;
    width: 0;
    height: 0;
  }
  .inner {
    background: @black;
    background: rgba(0,0,0,.8);
    padding: 3px;
    overflow: hidden;
    width: 280px;
    .border-radius(6px);
    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
  }
  .title {
    background-color: #f5f5f5;
    padding: 9px 15px;
    line-height: 1;
    .border-radius(3px 3px 0 0);
    border-bottom:1px solid #eee;
  }
  .content {
    background-color: @white;
    padding: 14px;
    .border-radius(0 0 3px 3px);
    .background-clip(padding-box);
    p, ul, ol {
      margin-bottom: 0;
    }
  }
}


// PATTERN ANIMATIONS
// ------------------

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


// LABELS
// ------

.label {
  padding: 1px 3px 2px;
  font-size: @basefont * .75;
  font-weight: bold;
  color: @white;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: @grayLight;
  .border-radius(3px);
  &.important { background-color: #c43c35; }
  &.warning   { background-color: @orange; }
  &.success   { background-color: @green; }
  &.notice    { background-color: lighten(@blue, 25%); }
}


// MEDIA GRIDS
// -----------

.media-grid {
  margin-left: -@gridGutterWidth;
  margin-bottom: 0;
  .clearfix();
  li {
    display: inline;
  }
  a {
    float: left;
    padding: 4px;
    margin: 0 0 @baseline @gridGutterWidth;
    border: 1px solid #ddd;
    .border-radius(4px);
    .box-shadow(0 1px 1px rgba(0,0,0,.075));
    img {
      display: block;
    }
    &:hover {
      border-color: @linkColor;
      .box-shadow(0 1px 4px rgba(0,105,214,.25));
    }
  }
}

/* carriageworks.less
 * Custom junk for CW site
 * ---------------------------------------------------------------------------- */

/*----------------------------------------------------------------------------*/
/* ! Mixins & Variables */
/*----------------------------------------------------------------------------*/

@import "variables.less"; 
@import "mixins.less"; 

/* Typekit */
.franklin-gothic { font-family: franklin-gothic-urw, Arial, "Helvetica Neue", Helvetica, sans-serif; }
.franklin-gothic-compressed { font-family: franklin-gothic-comp-urw, "Arial Narrow", Arial, "Helvetica Neue", Helvetica, sans-serif; }

/* Colours */
.black-on-white { color: @black; background-color: @white; }
.black-on-black { color: @black; background-color: @black; }
.white-on-black { color: @white; background-color: @black; }
.white-on-white { color: @white; background-color: @white; }

/* Shadows */
.slight-shadow {
	-webkit-box-shadow:	0px 1px 1px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:		0px 1px 1px rgba(50, 50, 50, 0.5);
	box-shadow: 				0px 1px 1px rgba(50, 50, 50, 0.5);
}

.no-shadow {
	-webkit-box-shadow:	0px 0px 0px transparent;
	-moz-box-shadow:		0px 0px 0px transparent;
	box-shadow: 				0px 0px 0px transparent;
}


/* Presentational classes/mixins -
	- .ir - Image replacement
	- .hidden - Hide for both screenreaders and browsers
	- .visuallyhidden - Hide only visually, but have it available for screenreaders
	- .invisible - Hide visually and from screenreaders, but maintain layout
*/

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }

.mobile-content {	display: none; visibility: hidden; }

/* Page Settings */ 
body {
	.black-on-white;
	.franklin-gothic;
	background: @grayDark;
}

body.home,
body.grid-list { background: @white; }
body.search1 #search-dropdown { display: block; }

body.home #supersized-loader, body.home #supersized { display: none; }

a { text-decoration: underline; }
a:hover { text-decoration: none; .white-on-black; }

h1, h2, h3, h4 {
	.franklin-gothic-compressed;
	color: @black;
	text-transform: uppercase;
}

h5, h6 {
	.franklin-gothic;
	color: @black;
	margin-bottom: 0;
	line-height: 18px;
}


ul, ol, li {
	color: @black;
}

h1, h2 {
	font-weight: normal;
}


h3 {
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
}

h4 {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 0;
	text-transform: uppercase;
	a { text-decoration: none; }
}

h5 { font-size: 13px; }
h6 { font-size: 10px; }

form, input, textarea, label, select {
	.franklin-gothic;
}
	
/*----------------------------------------------------------------------------*/
/* ! Topbar and Main Nav */
/*----------------------------------------------------------------------------*/

#logo {
	height: 130px;
	z-index: 999;
	position: fixed;
	top: 25px;
	right: 0px;
 	.clearfix;

	a.brand {
		.ir;
		width: 950px;
		height: 130px;
	}
	
	a.brand:hover { background-color: transparent; }
}

#big-nav {
	.franklin-gothic-compressed;
	font-size: 16px;
	position: fixed;
	text-transform: uppercase;
	right: 30px;
	top: 185px;	
	z-index: 9999;
 	.clearfix;

	ul {
		list-style-type: none;
		margin-left: 0;
		text-align: right;
 		li { line-height: 1.5em; margin-bottom: 3px; }
		a, span {
			.black-on-white;
			text-decoration: none;
			padding: 0 3px;
			display: inline-block;
			width: auto;
		}
		a:hover, a:active { .white-on-black; }
		li.home a { font-weight: bold; }
		
		a.current {
			cursor: default;
			.white-on-black;
		}
		ul { display: none; }
	}
}

#html_page_2966 #big-nav > ul > li:first-child { display: none; }
#big-nav > ul > li:first-child > a { font-weight: bold; }

body.fullscreen #big-nav ul a { .slight-shadow; }


a.current {
	cursor: default;
	.white-on-black;
}

// left and right containers

.container.left { margin-left: 30px; margin-right: auto; }
.container.right { margin-right: 30px; margin-left: auto; }
.container#page-content { margin-top: 0; padding-top: 185px; }

/*----------------------------------------------------------------------------*/
/* ! Homepage / List View Specific Styling */
/*----------------------------------------------------------------------------*/

body.home,
body.grid-list {
	#logo { 
		z-index: 999; 
	}
	#big-nav { 
		z-index: 9999; 
		li.home { .hidden }
	}
}

div.image-tile {
	position: relative;
	margin-bottom: 50px;
	overflow: visible;
	line-height: 0;
	z-index: 50;

	a:first-child {
		.franklin-gothic-compressed;
		font-size: 16px;
		height: 100%;
		width: 100%;
		text-transform: uppercase;
		line-height: 1.45em;
		text-align: left;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		margin-left: -20px;
		padding-right: 20px;
		padding-top: 20px;
		background-repeat: repeat;
		text-decoration: none;
		@transition: opacity linear .2s;
		.transition(@transition);
		opacity: 0;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
		filter: alpha(opacity=0);
		span {
			.white-on-black;
		}
	}

	a:first-child:hover {
		color: @white;
		opacity: 1;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
		filter: alpha(opacity=100);		
	} 
	
	a:first-child:active span { .black-on-black; }
} // /.image-tile

.image-tile.repeating-tile-2 {
	margin-top: 40px;
}

.image-tile.repeating-tile-3 {
	margin-bottom: 0px;
}

.image-tile.repeating-tile-5 {
	margin-top: 50px;
}


div.image-tile.behind { z-index: 1; }

div.infront { z-index: 1; }

/* Image resizing */

/*
Following larger sizes generated by CMS:
- 'Background'	1920px * 1280px
-	'Slideshow'		950px * 633px 
-	'Large'				510px * 340px 

Smaller sizes managed with CSS classes - see below. All sizes are proportional.
*/

.imagetilescaling(@width: 510px) {
	width: @width;
	//	height: @width * 0.66667;
 	height: auto;
}

/* Four sizes used in design */
.span13 .image-tile img { .imagetilescaling(510px); }
.span10 .image-tile img { .imagetilescaling(390px); }
.span7 .image-tile img	{ .imagetilescaling(270px); }
.span5 .image-tile img	{ .imagetilescaling(190px); }

/* And the rest, just in case */
.span1 .image-tile img	{ .imagetilescaling(30px); }
.span2 .image-tile img	{ .imagetilescaling(70px); }
.span3 .image-tile img	{ .imagetilescaling(110px); }
.span4 .image-tile img	{ .imagetilescaling(150px); }
/* .span5 above */
.span6 .image-tile img	{ .imagetilescaling(230px); }
/* .span7 above */
.span8 .image-tile img	{ .imagetilescaling(310px); }
.span9 .image-tile img	{ .imagetilescaling(450px); }
/* .span10 above */
.span11 .image-tile img	{ .imagetilescaling(430px); }
.span12 .image-tile img	{ .imagetilescaling(470px); }
/* .span13 above */
.span14 .image-tile img	{ .imagetilescaling(550px); }
.span15 .image-tile img	{ .imagetilescaling(590px); }
.span16 .image-tile img	{ .imagetilescaling(630px); }
.span17 .image-tile img	{ .imagetilescaling(670px); }
.span18 .image-tile img	{ .imagetilescaling(710px); }
.span19 .image-tile img	{ .imagetilescaling(740px); }
.span20 .image-tile img	{ .imagetilescaling(790px); }
.span21 .image-tile img	{ .imagetilescaling(830px); }
.span22 .image-tile img	{ .imagetilescaling(870px); }
.span23 .image-tile img	{ .imagetilescaling(910px); }
.span24 .image-tile img	{ .imagetilescaling(950px); }


/*----------------------------------------------------------------------------*/
/* ! .box classes for repeating pattern of 6 */
/*----------------------------------------------------------------------------*/

.box1, .box2, .box3, .box4, .box5, .box6 {
	display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
	vertical-align: top;
}

.box1, .box6 { width: 510px; }
.box2, .box3 { width: 390px; }
.box4, .box5 { width: 270px; }

.box1, .box3 { margin-left: 0; }
.box2, .box6, .box4 { margin-left: 45px; }
.box5 { margin-left: 120px; }

.box1 .image-tile img,
.box6 .image-tile img { .imagetilescaling(510px); }

.box2 .image-tile img,
.box3 .image-tile img { .imagetilescaling(390px); }

.box4 .image-tile img,
.box5 .image-tile img	{ .imagetilescaling(270px); }


div.search-social-tile {
	height: 166px;
	background: @white;
	margin-bottom: 48px;
	overflow: hidden;

	input {
		outline: 0;
		border-color: @black;
		@shadow: 0 0 0 rgba(0,0,0,0);
		.box-shadow(@shadow);
		color: @white;
		background: @black;
		.border-radius(0px);
	}
	
	ul.social-icons {
		margin-bottom: 18px;
	}
}

#latest-tweet {
	ul {
		list-style: none;
		margin: 0;
		li { .black-on-white; }
		a { .black-on-white; }
		a:hover { .white-on-black; }
	}
}

.slideshow-container {
	padding-bottom: 48px;
	position: relative;
}

#top-slideshow {
	height: 633px;
	margin-bottom: 0;
	background: @black;
	
	a {
		height: 613px;
		// 633px - 20px padding top
	}
}

#top-slideshow-pager {
	position: relative;
	z-index: 10;
	
	a {
		.ir;
		width: 100px;
		height: 350px;
		position: absolute;
		top: 130px;
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 0.25;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; 
		filter: alpha(opacity=25);
		@transition: opacity linear .2s;
		.transition(@transition);
	}
	
	a.prev { left: 0px; }
	a.next { right: 0px; }
	a:hover, a:active {
		opacity: 1.0;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
		filter: alpha(opacity=100);
	}

}

/*----------------------------------------------------------------------------*/
/* ! Search Results / Gridded List View */
/*----------------------------------------------------------------------------*/

body.grid-list #logo { z-index: 999; }

h2.divider {
	.white-on-black;
	padding: 0 6px;
	font-weight: normal;
	margin-bottom: 10px;
	margin-top: 18px;
}

.grid-tile {
	.white-on-black;
	height: 300px;
	padding: 0 10px 10px 10px;
	width: 210px; // total width: 210 + 10 + 10 = 230px, same as a .span6 column
	margin-bottom: 10px;
	overflow: hidden;
	
	/* .span6 grid tile for search results / archive list view */
	img {
		.imagetilescaling(230px);
		margin-left: -10px;
    vertical-align: middle;
    margin-bottom: 8px;
	}

	h1, h2, h3, h4, h5, h6 {
		.white-on-black;	
	}
	
	a {
		.white-on-black;	
		text-decoration: none;
	}

}

.grid-tile:hover {
	.black-on-white;
	h1, h2, h3, h4, h5, h6, a {
		.black-on-white;
	}
	a {
		text-decoration: underline;
	}
}

.grid-tile.text {
	.black-on-white;
	padding: 4px;
	width: 222px; // back to full width for text tiles
	height: 110px; // same as .grid-tile less image height
	h1, h2, h3, h4, h5, h6, a {
		.black-on-white;
	}
}

.grid-tile.text:hover {
	.white-on-black;
	h1, h2, h3, h4, h5, h6, a {
		.white-on-black;
	}
}


/*----------------------------------------------------------------------------*/
/* ! Info Dropdowns for productions, venues, etc */
/*----------------------------------------------------------------------------*/

.info-dropdown,
.info-link,
.info-panel {
	.white-on-black;
	.franklin-gothic;
	padding-bottom: 15px;
	background: transparent; 
	
	h3 {
		text-transform: uppercase;
		
		a {
			.white-on-black;
			text-decoration: none;
			display: block;
			padding: 5px 20px 5px 10px;
			background-position: 97% center;
			background-repeat: no-repeat;
			cursor: move; // move cursor for whole div?
		}
		
		a:hover {
			.black-on-white;
			text-decoration: none;
			background-position: 97% center;
			background-repeat: no-repeat;
		}
	}
	
	.dropdown-contents {
		.black-on-white;
		padding: 7px 10px 7px 10px;
		display: none; // hidden on page load
	}

} // /.info-dropdown, panel, link

.info-panel {
	.dropdown-contents {
		.black-on-white;
		padding: 7px 10px;
		display: block;
	}
	
	h3 {
		text-transform: uppercase;	
		a {
			.black-on-white;
			text-decoration: none;
			display: block;
			padding: 5px 5px 5px 10px;
			cursor: move; 
		}
		a:hover {
			text-decoration: none;
			.white-on-black;
		}
	}

}

.info-dropdown.open {
	color: #000;
	background: transparent;

	h3 {			
		a {
			.white-on-black;
			text-decoration: none;
			background-position: 97% center;
			background-repeat: no-repeat;
		}
		
		a:hover {
			.white-on-black;
			background-position: 97% center;
			background-repeat: no-repeat;
		}
	}
	
	a {
		.black-on-white;
		text-decoration: underline;
	}

	a:hover {
		.white-on-black;
		text-decoration: none;
	}

} // /.info-dropdown-open

.info-dropdown#capacity-dimensions .dropdown-contents { 
	width: 310px;
	.slight-shadow;	
	overflow: hidden;
}

.info-dropdown#main-dropdown .dropdown-contents { 
	width: 490px;
	.slight-shadow;	
	overflow: hidden;
}


.info-dropdown.open#capacity-dimensions,
.info-dropdown.open#main-dropdown { 
	// moving the shadow to .dropdown-contents means it looks better when open
	.no-shadow; 
}

.dropdown-contents.accordian-list {
	h4 {
		padding-left: 16px;
/* 		background-image: url('../images/arrow-small-down-black.png'); */
		background-position: 2px center;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	
	h4:hover {
		color: @white;
		background-color: @black;
/* 		background-image: url('../images/arrow-small-down-white.png'); */
		background-position: 2px center;
		background-repeat: no-repeat;
	}
	
/* 	h4.open 			{ background-image: url('../images/arrow-small-up-black.png'); }	 */
/* 	h4.open:hover { background-image: url('../images/arrow-small-up-white.png'); } */
}

.info-link {
	cursor: move;
	h3 {
		a {
/* 			background-image: url('../images/arrow-right-white.png'); */
			background-position: 97% center;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		
		a:hover {
/* 			background-image: url('../images/arrow-right-black.png'); */
			background-position: 97% center;
			background-repeat: no-repeat;
		}				
	}
}

ul.social-icons {
	list-style: none;
	margin-left: -4px;
		margin-bottom: 4px;
	.clearfix;

	li {
			float: left;
			margin-left: 4px;
	}
	
	// email button for sharing
	
	li.email a {
		.ir;
		display: block;
		width: 57px;
		height: 20px;
	}
	
	// direct links to other services
	
	li.social-link a {
		.ir;
		display: block;
		width: 30px;
		height: 30px;	
		background-position: top center;
		background-repeat: no-repeat;
	}
	
	li.social-link a:hover { background-position: bottom center; }
	
}

.logolist ul {
	margin: 10px 0 15px 0;
}

.logolist ul li {
	list-style: none;
	margin-right: 15px;
	display: inline;
}
	
/*----------------------------------------------------------------------------*/
/* ! Form/input styling */
/*----------------------------------------------------------------------------*/

input:focus,
textarea:focus {
	outline: 0;
	border-color: @grayLight;
	@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(50,50,50,.3);
	.box-shadow(@shadow);
	color: @black;
}

.info-dropdown input { width: 160px; }

input { .franklin-gothic; }

form.form-stacked {
	padding-left: 0px;
}

form#venue-enquiry { 
	div.offset1 {
		margin-left: 28px;
	}
	textarea {
  	resize: none;
	}
	textarea.span12 {
  	width: 478px;
  	resize: vertical;
	}
}

.btn.primary {
	.gradientBar(@grayDark, @black);
}

/*----------------------------------------------------------------------------*/
/* ! Positioning .info-dropdown boxes based on #page-content positioning class */
/*----------------------------------------------------------------------------*/

.info-dropdown, .info-panel, #extra-link-panel { position: absolute; }

/* subnav and search dropdown always in the same spot */

#subnav-and-search {
	position: absolute;
	right: 50px;
	top: 440px;	
}

#subnav {
	position: static;
	margin-bottom: 10px;
	cursor: default;
	
	ul {
		list-style: none;
		margin: 0;
		
		li {
			font-size: 14px;
			.franklin-gothic-compressed;
			text-transform: uppercase;
			font-weight: bold;
			
			a { text-decoration: none; }
		}
	}
}



#search-dropdown {
	position: static;
	display: none;
	.dropdown-contents {
		overflow: visible;
		padding-bottom: 1px;
	}
	h3 a { cursor: default; }
}

/* A set of 'backup positions' for pages with no positioning class */

#main-dropdown {
	left: 100px; 
	top: 250px;
}

#details-dropdown {
	left: 500px; 
	top: 185px;
}

#tickets-dropdown {
	left: 700px;
	top: 500px;
}

#capacity-dimensions {
	left: 350px;
	top: 185px;
}

#extra-link-panel {
	left: 670px;
	top: 530px;
}

#page-content-1col {
	/* defaults to top-left, fine here for the moment  */
}

#page-content-2col-1 {
	// left edge stays as is
	top: 270px;
}

#page-content-2col-2 {
	left: 380px;
	// top edge stays as is
}

#html_page_3581 #page-content-1col {
	/* Anna Schwartz page is a special case */
	width: 310px;
}

/*
custom positioning CSS to be finished if/when we get time

#page-content.dropdowns-lower-left {

	.info-dropdown,
	.info-panel { position: absolute; }

	#main-dropdown {
		left: 45px;
		top: 355px;
	}
	
	#details-dropdown {
		left: 475px;
		top: 555px;
	}
	
	#tickets-dropdown {
		left: 650px;
		top: 405px;
	}
	
	#capacity-dimensions {
		left: 350px;
		top: 165px;
	}

	#venue-enquiry {
		left: 680px;
		top: 540px;
	}

}
*/

/*----------------------------------------------------------------------------*/
/* ! Footer */
/*----------------------------------------------------------------------------*/

footer {
	margin: 10px auto;
	padding-top: 14px;
	border-top: solid 1px @gray;
	p { font-size: 11px; line-height: 16px; }
	a { .black-on-white; text-decoration: none; border-bottom: solid 1px @grayLight; }
	a:hover { .black-on-white; border-bottom-color: @black; }
	.left { text-align: left; }
	.right { text-align: left; }
}

.fullscreen footer {
	border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}

.twipsy-inner { background: rgba(0,0,0,1); opacity: 1.0; .border-radius(0px); }
/* CSS Selection */
::selection { background: @gray; color: @white; text-shadow: none; } /* Webkit */
::-moz-selection { background: @gray; color: @white; text-shadow: none; } /* Firefox */