ace-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ma...@apache.org
Subject svn commit: r804293 [2/2] - in /websites/production/ace: ./ content/ content/css/ content/dev-doc/ content/get-involved/ content/img/ content/js/ content/lib/ content/user-doc/
Date Wed, 08 Feb 2012 23:45:34 GMT
Modified: websites/production/ace/content/lib/mixins.less
==============================================================================
--- websites/production/ace/content/lib/mixins.less (original)
+++ websites/production/ace/content/lib/mixins.less Wed Feb  8 23:45:33 2012
@@ -1,40 +1,86 @@
-/* Mixins.less
- * Snippets of reusable CSS to develop faster and keep code readable
- * ----------------------------------------------------------------- */
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
 
 
-// Clearfix for clearing floats like a boss h5bp.com/q
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
 .clearfix() {
-  zoom: 1;
+  *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
-    zoom: 1;
   }
   &:after {
     clear: both;
   }
 }
 
+// Webkit-style focus
+// ------------------
+.tab-focus() {
+  // Default
+  outline: thin dotted;
+  // 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;
+
+  &:last-child {
+    *margin-left: 0;
+  }
+}
+
 // Sizing shortcuts
+// -------------------------
 .size(@height: 5px, @width: 5px) {
-  height: @height;
   width: @width;
+  height: @height;
 }
 .square(@size: 5px) {
   .size(@size, @size);
 }
 
-// Input placeholder text
-.placeholder(@color: @grayLight) {
+// Placeholder text
+// -------------------------
+.placeholder(@color: @placeholderText) {
   :-moz-placeholder {
     color: @color;
   }
@@ -43,58 +89,185 @@
   }
 }
 
-// Font Stacks
+
+
+// FONTS
+// --------------------------------------------------
+
 #font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
+  #family {
+    .serif() {
+      font-family: Georgia, "Times New Roman", Times, serif;
+    }
+    .sans-serif() {
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+    .monospace() {
+      font-family: Menlo, Monaco, "Courier New", monospace;
+    }
   }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
     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;
+  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+    #font > #family > .serif;
+    #font > .shorthand(@size, @weight, @lineHeight);
   }
-  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
-    font-family: "Monaco", Courier New, monospace;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @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);
   }
 }
 
-// Grid System
-.fixed-container() {
-  width: @siteWidth;
+
+
+// GRID SYSTEM
+// --------------------------------------------------
+
+// Site container
+// -------------------------
+.container-fixed() {
+  width: @gridRowWidth;
   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;
+
+// Le grid system
+// -------------------------
+#gridSystem {
+  // Setup the mixins to be used
+  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  } 
+  .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
+    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+  }
+  .gridColumn(@gridGutterWidth) {
+    float: left;
+    margin-left: @gridGutterWidth;
+  }
+  // Take these values and mixins, and make 'em do their thang
+  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+    // Row surrounds the columns
+    .row {
+      margin-left: @gridGutterWidth * -1;
+      .clearfix();
+    }
+    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+    [class*="span"] {
+      #gridSystem > .gridColumn(@gridGutterWidth);
+    }
+    // Default columns
+    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+    .span12,
+    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+    // Offset column options
+    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
+    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
+    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
+    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
+    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
+    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
+    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
+    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
+    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
+    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
+    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
+  }
+}
+
+// Fluid grid system
+// -------------------------
+#fluidGridSystem {
+  // Setup the mixins to be used
+  .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
+    width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+  } 
+  .gridColumn(@fluidGridGutterWidth) {
+    float: left;
+    margin-left: @fluidGridGutterWidth;
+  }
+  // Take these values and mixins, and make 'em do their thang
+  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {      
+    // Row surrounds the columns
+    .row-fluid {
+      width: 100%;
+      .clearfix();
+
+      // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+      > [class*="span"] {
+        #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
+      }
+      > [class*="span"]:first-child {
+        margin-left: 0;
+      }
+      // Default columns
+      .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+      .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+      .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+      .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+      .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+      .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+      .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+      .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+      .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+      .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+      .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+      .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+    }
+  }
 }
-// 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);
+
+
+
+// Input grid system
+// -------------------------
+#inputGridSystem {
+  .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+  }
+  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+    input,
+    textarea,
+    .uneditable-input {
+      &.span1     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+      &.span2     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+      &.span3     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+      &.span4     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+      &.span5     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+      &.span6     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+      &.span7     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+      &.span8     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+      &.span9     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+      &.span10    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+      &.span11    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+      &.span12    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+    }
+  }
 }
 
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
 // Border Radius
 .border-radius(@radius: 5px) {
   -webkit-border-radius: @radius;
@@ -111,22 +284,91 @@
 
 // Transitions
 .transition(@transition) {
-     -webkit-transition: @transition;
-        -moz-transition: @transition;
-         -ms-transition: @transition;
-          -o-transition: @transition;
-             transition: @transition;
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+      -ms-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: 0, @y: 0) {
+  -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: 0, @y: 0) {
+  -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: 0, @y: 0) {
+  -webkit-transform: skew(@x, @y);
+     -moz-transform: skew(@x, @y);
+      -ms-transform: skew(@x, @y);
+       -o-transform: skew(@x, @y);
+          transform: skew(@x, @y);
 }
 
 // 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;
+       -o-user-select: @select;
+          user-select: @select;
+}
+
+// Resize anything
+.resizable(@direction: both) {
+  resize: @direction; // Options: horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
 // CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: 20px) {
+.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
   -webkit-column-count: @columnCount;
      -moz-column-count: @columnCount;
           column-count: @columnCount;
@@ -135,12 +377,17 @@
           column-gap: @columnGap;
 }
 
-// Make any element resizable for prototyping
-.resizable(@direction: both) {
-  resize: @direction; // Options are horizontal, vertical, both
-  overflow: auto; // Safari fix
+// Opacity
+.opacity(@opacity: 100) {
+  opacity: @opacity / 100;
+   filter: e(%("alpha(opacity=%d)", @opacity));
 }
 
+
+
+// BACKGROUNDS
+// --------------------------------------------------
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   .background(@color: @white, @alpha: 1) {
@@ -148,45 +395,42 @@
   }
   .border(@color: @white, @alpha: 1) {
     border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-    background-clip: padding-box;
+    .background-clip(padding-box);
   }
 }
 
-// Gradient Bar Colors for buttons and allerts
+// Gradient Bar Colors for buttons and alerts
 .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) {
+  .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-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(left, @startColor, @endColor); // Le standard
+    background-repeat: repeat-x;
     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
+  .vertical(@startColor: #555, @endColor: #333) {
+    background-color: mix(@startColor, @endColor, 60%);
     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-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(top, @startColor, @endColor); // The standard
+    background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
   }
-  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+  .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+
@@ -196,27 +440,98 @@
     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-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, @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);
+    background-repeat: no-repeat;
     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
   }
+  .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: -ms-radial-gradient(circle, @innerColor, @outerColor);
+    background-repeat: no-repeat;
+    // Opera cannot do radial gradients yet
+  }
+  .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: -ms-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)"));
 }
 
-// Opacity
-.opacity(@opacity: 100) {
-  filter: e(%("alpha(opacity=%d)", @opacity));
-  -khtml-opacity: @opacity / 100;
-    -moz-opacity: @opacity / 100;
-         opacity: @opacity / 100;
-}
\ No newline at end of file
+
+// Mixin for generating button backgrounds
+// ---------------------------------------
+.buttonBackground(@startColor, @endColor) {
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  .gradientBar(@startColor, @endColor);
+  .reset-filter();
+
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:active, &.active, &.disabled, &[disabled] {
+    background-color: @endColor;
+  }
+
+  // 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");
+  }
+}
+
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// POPOVER ARROWS
+// -------------------------
+// For tipsies and popovers
+#popoverArrow {
+  .top(@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;
+  }
+  .bottom(@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;
+  }
+}

Modified: websites/production/ace/content/lib/patterns.less
==============================================================================
--- websites/production/ace/content/lib/patterns.less (original)
+++ websites/production/ace/content/lib/patterns.less Wed Feb  8 23:45:33 2012
@@ -1,1063 +1,13 @@
-/* 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;
-  }
-}
+// Patterns.less
+// Repeatable UI elements outside the base styles provided from the scaffolding
+// ----------------------------------------------------------------------------
 
 
 // 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;
+  padding-top: @baseLineHeight - 1;
+  margin-top: @baseLineHeight - 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;
-  max-height: 500px;
-  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);
-  .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);
-  text-shadow: none;
-  &.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));
-    }
-  }
-}

Modified: websites/production/ace/content/lib/reset.less
==============================================================================
--- websites/production/ace/content/lib/reset.less (original)
+++ websites/production/ace/content/lib/reset.less Wed Feb  8 23:45:33 2012
@@ -1,44 +1,10 @@
-/* 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
-// --------------------------------------------------
+// Reset.less
+// Adapted from Normalize.css http://github.com/necolas/normalize.css
+// ------------------------------------------------------------------------
 
 // 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,
@@ -54,7 +20,7 @@ section {
 
 // Display block in IE6-9 and FF3
 // -------------------------
-// Source: http://github.com/necolas/normalize.css
+
 audio,
 canvas,
 video {
@@ -65,19 +31,37 @@ video {
 
 // Prevents modern browsers from displaying 'audio' without controls
 // -------------------------
-// Source: http://github.com/necolas/normalize.css
+
 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
 // -------------------------
-// Source: http://github.com/necolas/normalize.css
+
 sub,
 sup {
+  position: relative;
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 sup {
@@ -89,35 +73,35 @@ sub {
 
 // Img border in a's and image quality
 // -------------------------
-// Source: http://github.com/necolas/normalize.css
+
 img {
-    border: 0;
-    -ms-interpolation-mode: bicubic;
+  max-width: 100%;
+  height: auto;
+  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;
+  font-size: 100%;
+  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
+  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
-  border: 0;
   padding: 0;
+  border: 0;
 }
 button,
 input[type="button"],
@@ -132,10 +116,11 @@ input[type="search"] { // Appearance in 
      -moz-box-sizing: content-box;
           box-sizing: content-box;
 }
-input[type="search"]::-webkit-search-decoration {
+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
-}
\ No newline at end of file
+}

Modified: websites/production/ace/content/lib/scaffolding.less
==============================================================================
--- websites/production/ace/content/lib/scaffolding.less (original)
+++ websites/production/ace/content/lib/scaffolding.less Wed Feb  8 23:45:33 2012
@@ -1,139 +1,29 @@
-/*
- * Scaffolding
- * Basic and global styles for generating a grid system, structural layout, and page templates
- * ------------------------------------------------------------------------------------------- */
+// 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;
-  }
+  font-family: @baseFontFamily;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
+  color: @textColor;
+  background-color: @white;
 }
 
 
-// BASE STYLES
-// -----------
+// LINKS
+// -----
 
-// 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;
+a:hover {
+  color: @linkColorHover;
+  text-decoration: underline;
 }
-.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; }
-.row {
-  > .offset-one-third   { margin-left: 340px; }
-  > .offset-two-thirds  { margin-left: 660px; }
-}
\ No newline at end of file

Modified: websites/production/ace/content/lib/tables.less
==============================================================================
--- websites/production/ace/content/lib/tables.less (original)
+++ websites/production/ace/content/lib/tables.less Wed Feb  8 23:45:33 2012
@@ -1,47 +1,59 @@
-/*
- * Tables.less
- * Tables for, you guessed it, tabular data
- * ---------------------------------------- */
+//
+// Tables.less
+// Tables for, you guessed it, tabular data
+// ----------------------------------------
 
 
+// BASE TABLES
+// -----------------
+
+table {
+  max-width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
 // BASELINE STYLES
 // ---------------
 
-table {
+.table {
   width: 100%;
-  margin-bottom: @baseline;
-  padding: 0;
-  font-size: @basefont;
-  border-collapse: collapse;
+  margin-bottom: @baseLineHeight;
+  // Cells
   th,
   td {
-    padding: 10px 10px 9px;
-    line-height: @baseline;
+    padding: 8px;
+    line-height: @baseLineHeight;
     text-align: left;
+    border-top: 1px solid #ddd;
   }
   th {
-    padding-top: 9px;
     font-weight: bold;
-    vertical-align: middle;
+    vertical-align: bottom;
   }
   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;
+  // Remove top border from thead by default
+  thead:first-child tr th,
+  thead:first-child tr td {
+    border-top: 0;
+  }
+  // Account for multiple tbody instances
+  tbody + tbody {
+    border-top: 2px solid #ddd;
   }
 }
 
 
-// CONDENSED VERSION
-// -----------------
-.condensed-table {
+
+// CONDENSED TABLE W/ HALF PADDING
+// -------------------------------
+
+.table-condensed {
   th,
   td {
-    padding: 5px 5px 4px;
+    padding: 4px 5px;
   }
 }
 
@@ -49,42 +61,69 @@ table {
 // BORDERED VERSION
 // ----------------
 
-.bordered-table {
+.table-bordered {
   border: 1px solid #ddd;
   border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  *border-collapse: collapsed; // IE7 can't round corners anyway
   .border-radius(4px);
   th + th,
   td + td,
-  th + td {
+  th + td,
+  td + th {
     border-left: 1px solid #ddd;
   }
-  thead tr:first-child th:first-child,
-  tbody tr:first-child td:first-child {
+  // Prevent a double border
+  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 {
     .border-radius(4px 0 0 0);
   }
-  thead tr:first-child th:last-child,
-  tbody tr:first-child td:last-child {
+  thead:first-child tr:first-child th:last-child,
+  tbody:first-child tr:first-child td:last-child {
     .border-radius(0 4px 0 0);
   }
-  tbody tr:last-child td:first-child {
+  // 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 {
     .border-radius(0 0 0 4px);
   }
-  tbody tr:last-child td:last-child {
+  thead:last-child tr:last-child th:last-child,
+  tbody:last-child tr:last-child td:last-child {
     .border-radius(0 0 4px 0);
   }
 }
 
 
-// TABLE CELL SIZES
-// ----------------
+// 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: #f9f9f9;
+    }
+  }
+}
+
 
-// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+
+// TABLE CELL SIZING
+// -----------------
+
+// Change the columns
 .tableColumns(@columnSpan: 1) {
-  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+  float: none;
+  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
+  margin-left: 0;
 }
 table {
-  // Default columns
   .span1     { .tableColumns(1); }
   .span2     { .tableColumns(2); }
   .span3     { .tableColumns(3); }
@@ -97,128 +136,4 @@ table {
   .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%);
-  }
-}
\ No newline at end of file

Modified: websites/production/ace/content/lib/type.less
==============================================================================
--- websites/production/ace/content/lib/type.less (original)
+++ websites/production/ace/content/lib/type.less Wed Feb  8 23:45:33 2012
@@ -1,77 +1,99 @@
-/* Typography.less
- * Headings, body text, lists, code, and more for a versatile and durable typography system
- * ---------------------------------------------------------------------------------------- */
+// 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;
+  margin: 0 0 @baseLineHeight / 2;
+  font-family: @baseFontFamily;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
   small {
-    font-size: @basefont - 2;
+    font-size: @baseFontSize - 2;
     color: @grayLight;
   }
 }
-
+.lead {
+  margin-bottom: @baseLineHeight;
+  font-size: 20px;
+  font-weight: 200;
+  line-height: @baseLineHeight * 1.5;
+}
 
 // HEADINGS
 // --------
 
 h1, h2, h3, h4, h5, h6 {
+  margin: 0;
   font-weight: bold;
   color: @grayDark;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
+    font-weight: normal;
     color: @grayLight;
   }
 }
 h1 {
-  margin-bottom: @baseline;
   font-size: 30px;
-  line-height: @baseline * 2;
+  line-height: @baseLineHeight * 2;
   small {
     font-size: 18px;
   }
 }
 h2 {
   font-size: 24px;
-  line-height: @baseline * 2;
+  line-height: @baseLineHeight * 2;
   small {
-    font-size: 14px;
+    font-size: 18px;
   }
 }
-h3, h4, h5, h6 {
-  line-height: @baseline * 2;
-}
 h3 {
+  line-height: @baseLineHeight * 1.5;
   font-size: 18px;
   small {
     font-size: 14px;
   }
 }
+h4, h5, h6 {
+  line-height: @baseLineHeight;
+}
 h4 {
-  font-size: 16px;
+  font-size: 14px;
   small {
     font-size: 12px;
   }
 }
 h5 {
-  font-size: 14px;
+  font-size: 12px;
 }
 h6 {
-  font-size: 13px;
+  font-size: 11px;
   color: @grayLight;
   text-transform: uppercase;
 }
 
+// Page header
+.page-header {
+  padding-bottom: @baseLineHeight - 1;
+  margin: @baseLineHeight 0;
+  border-bottom: 1px solid @grayLighter;
+}
+.page-header h1 {
+  line-height: 1;
+}
+
+
 
-// COLORS
-// ------
+// LISTS
+// -----
 
 // Unordered and Ordered lists
 ul, ol {
-  margin: 0 0 @baseline 25px;
+  padding: 0;
+  margin: 0 0 @baseLineHeight / 2 25px;
 }
 ul ul,
 ul ol,
@@ -86,26 +108,26 @@ ol {
   list-style: decimal;
 }
 li {
-  line-height: @baseline;
-  color: @gray;
+  line-height: @baseLineHeight;
 }
 ul.unstyled {
-  list-style: none;
   margin-left: 0;
+  list-style: none;
 }
 
 // Description Lists
 dl {
-  margin-bottom: @baseline;
-  dt, dd {
-    line-height: @baseline;
-  }
-  dt {
-    font-weight: bold;
-  }
-  dd {
-    margin-left: @baseline / 2;
-  }
+  margin-bottom: @baseLineHeight;
+}
+dt,
+dd {
+  line-height: @baseLineHeight;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: @baseLineHeight / 2;
 }
 
 // MISC
@@ -113,75 +135,83 @@ dl {
 
 // Horizontal rules
 hr {
-  margin: 20px 0 19px;
+  margin: @baseLineHeight 0;
   border: 0;
-  border-bottom: 1px solid #eee;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid @white;
 }
 
 // Emphasis
 strong {
-  font-style: inherit;
   font-weight: bold;
 }
 em {
   font-style: italic;
-  font-weight: inherit;
-  line-height: inherit;
 }
 .muted {
   color: @grayLight;
 }
 
+// Abbreviations and acronyms
+abbr {
+  font-size: 90%;
+  text-transform: uppercase;
+  border-bottom: 1px dotted #ddd;
+  cursor: help;
+}
+
 // Blockquotes
 blockquote {
-  margin-bottom: @baseline;
-  border-left: 5px solid #eee;
-  padding-left: 15px;
+  padding: 0 0 0 15px;
+  margin: 0 0 @baseLineHeight;
+  border-left: 5px solid @grayLighter;
   p {
-    #font > .shorthand(300,14px,@baseline);
     margin-bottom: 0;
+    #font > .shorthand(16px,300,@baseLineHeight * 1.25);
   }
   small {
     display: block;
-    #font > .shorthand(300,12px,@baseline);
+    line-height: @baseLineHeight;
     color: @grayLight;
     &:before {
       content: '\2014 \00A0';
     }
   }
+
+  // Float right with text-align: right
+  &.pull-right {
+    float: right;
+    padding-left: 0;
+    padding-right: 15px;
+    border-left: 0;
+    border-right: 5px solid @grayLighter;
+    p,
+    small {
+      text-align: right;
+    }
+  }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before, 
+blockquote:after {
+  content: "";
 }
 
 // Addresses
 address {
   display: block;
-  line-height: @baseline;
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
+  line-height: @baseLineHeight;
+  font-style: normal;
 }
 
-// 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);
+// Misc
+small {
+  font-size: 100%;
 }
-code {
-  background-color: lighten(@orange, 40%);
-  color: rgba(0,0,0,.75);
-  padding: 1px 3px;
+cite {
+  font-style: normal;
 }
-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;
-
-}
\ No newline at end of file

Modified: websites/production/ace/content/lib/variables.less
==============================================================================
--- websites/production/ace/content/lib/variables.less (original)
+++ websites/production/ace/content/lib/variables.less Wed Feb  8 23:45:33 2012
@@ -1,60 +1,99 @@
-/* Variables.less
- * Variables to customize the look and feel of Bootstrap
- * ----------------------------------------------------- */
+// Variables.less
+// Variables to customize the look and feel of Bootstrap
+// -----------------------------------------------------
 
 
-// Links
-@linkColor:         #0069d6;
-@linkColorHover:    darken(@linkColor, 15);
-
-// Grays
-@black:             #000;
-@grayDark:          lighten(@black, 25%);
-@gray:              lighten(@black, 50%);
-@grayLight:         lighten(@black, 75%);
-@grayLighter:       lighten(@black, 90%);
-@white:             #fff;
-
-// Accent Colors
-@blue:              #049CDB;
-@blueDark:          #0064CD;
-@green:             #46a546;
-@red:               #9d261d;
-@yellow:            #ffc40d;
-@orange:            #f89406;
-@pink:              #c3325f;
-@purple:            #7a43b6;
-
-// Baseline grid
-@basefont:          13px;
-@baseline:          18px;
-
-// Griditude
-// Modify the grid styles in mixins.less
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Color Scheme
-// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
-@baseColor:         @blue;                  // Set a base color
-@complement:        spin(@baseColor, 180);  // Determine a complementary color
-@split1:            spin(@baseColor, 158);  // Split complements
-@split2:            spin(@baseColor, -158);
-@triad1:            spin(@baseColor, 135);  // Triads colors
-@triad2:            spin(@baseColor, -135);
-@tetra1:            spin(@baseColor, 90);   // Tetra colors
-@tetra2:            spin(@baseColor, -90);
-@analog1:           spin(@baseColor, 22);   // Analogs colors
-@analog2:           spin(@baseColor, -22);
 
+// GLOBAL VALUES
+// --------------------------------------------------
 
+// Links
+@linkColor:             #08c;
+@linkColorHover:        darken(@linkColor, 15%);
 
-// More variables coming soon:
-// - @basefont to @baseFontSize
-// - @baseline to @baseLineHeight
-// - @baseFontFamily
-// - @primaryButtonColor
-// - anything else? File an issue on GitHub
\ No newline at end of file
+// Grays
+@black:                 #000;
+@grayDarker:            #222;
+@grayDark:              #333;
+@gray:                  #555;
+@grayLight:             #999;
+@grayLighter:           #eee;
+@white:                 #fff;
+
+// Accent colors
+@blue:                  #049cdb;
+@blueDark:              #0064cd;
+@green:                 #46a546;
+@red:                   #9d261d;
+@yellow:                #ffc40d;
+@orange:                #f89406;
+@pink:                  #c3325f;
+@purple:                #7a43b6;
+
+// Typography
+@baseFontSize:          13px;
+@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight:        18px;
+@textColor:             @grayDark;
+
+// Buttons
+@primaryButtonBackground:    @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:         1020;
+@zindexFixedNavbar:     1030;
+@zindexModalBackdrop:   1040;
+@zindexModal:           1050;
+
+// Input placeholder text color
+@placeholderText:       @grayLight;
+
+// Navbar
+@navbarHeight:                    40px;
+@navbarBackground:                @grayDarker;
+@navbarBackgroundHighlight:       @grayDark;
+
+@navbarText:                      @grayLight;
+@navbarLinkColor:                 @grayLight;
+@navbarLinkColorHover:            @white;
+
+// 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%);
+
+
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+@gridColumns:             12;
+@gridColumnWidth:         60px;
+@gridGutterWidth:         20px;
+@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Fluid grid
+@fluidGridColumnWidth:    6.382978723%;
+@fluidGridGutterWidth:    2.127659574%;

Modified: websites/production/ace/content/news.html
==============================================================================
--- websites/production/ace/content/news.html (original)
+++ websites/production/ace/content/news.html Wed Feb  8 23:45:33 2012
@@ -11,14 +11,23 @@
     <script src="/js/less-1.2.1.min.js" type="text/javascript"></script>
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
     <script src="/js/prettify.js"></script>
-    <script src="/js/bootstrap-modal.js"></script>
+    
+    <script src="/js/bootstrap-alert.js"></script>
+    <script src="/js/bootstrap-dropdown.js"></script>
+    <script src="/js/bootstrap-tooltip.js"></script>
     <script src="/js/bootstrap-alerts.js"></script>
-    <script src="/js/bootstrap-twipsy.js"></script>
+    <script src="/js/bootstrap-modal.js"></script>
+    <script src="/js/bootstrap-transition.js"></script>
+    <script src="/js/bootstrap-button.js"></script>
     <script src="/js/bootstrap-popover.js"></script>
-    <script src="/js/bootstrap-dropdown.js"></script>
+    <script src="/js/bootstrap-twipsy.js"></script>
+    <script src="/js/bootstrap-buttons.js"></script>
     <script src="/js/bootstrap-scrollspy.js"></script>
+    <script src="/js/bootstrap-typeahead.js"></script>
+    <script src="/js/bootstrap-carousel.js"></script>
+    <script src="/js/bootstrap-tab.js"></script>
+    <script src="/js/bootstrap-collapse.js"></script>
     <script src="/js/bootstrap-tabs.js"></script>
-    <script src="/js/bootstrap-buttons.js"></script>
     
     
     
@@ -29,13 +38,13 @@
   </head>
 
   <body style="padding-top: 50px;">
-    <div class="topbar">
-      <div class="fill">
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
         <div class="container">
           <a class="brand" href="/index.html">Apache ACE</a>
-          <ul class="nav" data-dropdown="dropdown">
+          <ul class="nav">
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">News</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">News <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/news.html">News</a>
@@ -49,7 +58,7 @@
     <a href="/downloads.html">Downloads</a>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">User Documentation</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">User Documentation <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/user-doc/introduction.html">Introduction</a>
@@ -69,7 +78,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Developer Documentation</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Developer Documentation <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/dev-doc/architecture.html">Architecture</a>
@@ -86,7 +95,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Get Involved</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Get Involved <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/get-involved/mailing-lists.html">Mailing Lists</a>
@@ -103,7 +112,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Wiki</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Wiki <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/wiki/board-reports.html">Board Reports</a>
@@ -114,7 +123,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Apache</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apache <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/apache/about.html">About</a>
@@ -139,13 +148,14 @@
       </div>
     </div>
     <div class="container">
+      <p><a href="/"><i class='icon-home'></i> Home</a></p>
       <h1>News</h1>
-      <p><a href="/">Home</a></p>
       <div class="clear"></div>
       <div id="content"><ul>
 <li>Apache ACE graduated as a TLP!</li>
 <li>Apache ACE version 0.8.1-incubator released! <a href="#TODO">Get it here</a>.</li>
 </ul></div>
+      <hr>
       <footer>
         <p>Copyright &#169; 2012 The Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br/>Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</p>
       </footer>

Modified: websites/production/ace/content/on-the-web.html
==============================================================================
--- websites/production/ace/content/on-the-web.html (original)
+++ websites/production/ace/content/on-the-web.html Wed Feb  8 23:45:33 2012
@@ -11,14 +11,23 @@
     <script src="/js/less-1.2.1.min.js" type="text/javascript"></script>
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
     <script src="/js/prettify.js"></script>
-    <script src="/js/bootstrap-modal.js"></script>
+    
+    <script src="/js/bootstrap-alert.js"></script>
+    <script src="/js/bootstrap-dropdown.js"></script>
+    <script src="/js/bootstrap-tooltip.js"></script>
     <script src="/js/bootstrap-alerts.js"></script>
-    <script src="/js/bootstrap-twipsy.js"></script>
+    <script src="/js/bootstrap-modal.js"></script>
+    <script src="/js/bootstrap-transition.js"></script>
+    <script src="/js/bootstrap-button.js"></script>
     <script src="/js/bootstrap-popover.js"></script>
-    <script src="/js/bootstrap-dropdown.js"></script>
+    <script src="/js/bootstrap-twipsy.js"></script>
+    <script src="/js/bootstrap-buttons.js"></script>
     <script src="/js/bootstrap-scrollspy.js"></script>
+    <script src="/js/bootstrap-typeahead.js"></script>
+    <script src="/js/bootstrap-carousel.js"></script>
+    <script src="/js/bootstrap-tab.js"></script>
+    <script src="/js/bootstrap-collapse.js"></script>
     <script src="/js/bootstrap-tabs.js"></script>
-    <script src="/js/bootstrap-buttons.js"></script>
     
     
     
@@ -29,13 +38,13 @@
   </head>
 
   <body style="padding-top: 50px;">
-    <div class="topbar">
-      <div class="fill">
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
         <div class="container">
           <a class="brand" href="/index.html">Apache ACE</a>
-          <ul class="nav" data-dropdown="dropdown">
+          <ul class="nav">
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">News</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">News <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/news.html">News</a>
@@ -49,7 +58,7 @@
     <a href="/downloads.html">Downloads</a>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">User Documentation</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">User Documentation <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/user-doc/introduction.html">Introduction</a>
@@ -69,7 +78,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Developer Documentation</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Developer Documentation <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/dev-doc/architecture.html">Architecture</a>
@@ -86,7 +95,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Get Involved</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Get Involved <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/get-involved/mailing-lists.html">Mailing Lists</a>
@@ -103,7 +112,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Wiki</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Wiki <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/wiki/board-reports.html">Board Reports</a>
@@ -114,7 +123,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Apache</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apache <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/apache/about.html">About</a>
@@ -139,10 +148,11 @@
       </div>
     </div>
     <div class="container">
+      <p><a href="/"><i class='icon-home'></i> Home</a></p>
       <h1>On the web</h1>
-      <p><a href="/">Home</a></p>
       <div class="clear"></div>
       <div id="content"><p>Placeholder page. Will contain links to pages that somehow mention Apache ACE.</p></div>
+      <hr>
       <footer>
         <p>Copyright &#169; 2012 The Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br/>Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</p>
       </footer>

Modified: websites/production/ace/content/sitemap.html
==============================================================================
--- websites/production/ace/content/sitemap.html (original)
+++ websites/production/ace/content/sitemap.html Wed Feb  8 23:45:33 2012
@@ -11,14 +11,23 @@
     <script src="/js/less-1.2.1.min.js" type="text/javascript"></script>
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
     <script src="/js/prettify.js"></script>
-    <script src="/js/bootstrap-modal.js"></script>
+    
+    <script src="/js/bootstrap-alert.js"></script>
+    <script src="/js/bootstrap-dropdown.js"></script>
+    <script src="/js/bootstrap-tooltip.js"></script>
     <script src="/js/bootstrap-alerts.js"></script>
-    <script src="/js/bootstrap-twipsy.js"></script>
+    <script src="/js/bootstrap-modal.js"></script>
+    <script src="/js/bootstrap-transition.js"></script>
+    <script src="/js/bootstrap-button.js"></script>
     <script src="/js/bootstrap-popover.js"></script>
-    <script src="/js/bootstrap-dropdown.js"></script>
+    <script src="/js/bootstrap-twipsy.js"></script>
+    <script src="/js/bootstrap-buttons.js"></script>
     <script src="/js/bootstrap-scrollspy.js"></script>
+    <script src="/js/bootstrap-typeahead.js"></script>
+    <script src="/js/bootstrap-carousel.js"></script>
+    <script src="/js/bootstrap-tab.js"></script>
+    <script src="/js/bootstrap-collapse.js"></script>
     <script src="/js/bootstrap-tabs.js"></script>
-    <script src="/js/bootstrap-buttons.js"></script>
     
     
     
@@ -29,13 +38,13 @@
   </head>
 
   <body style="padding-top: 50px;">
-    <div class="topbar">
-      <div class="fill">
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
         <div class="container">
           <a class="brand" href="/index.html">Apache ACE</a>
-          <ul class="nav" data-dropdown="dropdown">
+          <ul class="nav">
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">News</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">News <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/news.html">News</a>
@@ -49,7 +58,7 @@
     <a href="/downloads.html">Downloads</a>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">User Documentation</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">User Documentation <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/user-doc/introduction.html">Introduction</a>
@@ -69,7 +78,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Developer Documentation</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Developer Documentation <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/dev-doc/architecture.html">Architecture</a>
@@ -86,7 +95,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Get Involved</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Get Involved <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/get-involved/mailing-lists.html">Mailing Lists</a>
@@ -103,7 +112,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Wiki</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Wiki <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/wiki/board-reports.html">Board Reports</a>
@@ -114,7 +123,7 @@
     </ul>
   </li>
   <li class="dropdown">
-    <a href="#" class="dropdown-toggle">Apache</a>
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apache <b class="caret"></b></a>
     <ul class="dropdown-menu">
       <li>
         <a href="/apache/about.html">About</a>
@@ -139,8 +148,8 @@
       </div>
     </div>
     <div class="container">
+      <p><a href="/"><i class='icon-home'></i> Home</a></p>
       <h1>Sitemap</h1>
-      <p><a href="/">Home</a></p>
       <div class="clear"></div>
       <div id="content"><ul>
 <li><a href="/downloads.html">Downloads</a></li>
@@ -148,6 +157,7 @@
 <li><a href="/news.html">News</a></li>
 <li><a href="/on-the-web.html">On the web</a></li>
 </ul></div>
+      <hr>
       <footer>
         <p>Copyright &#169; 2012 The Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br/>Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</p>
       </footer>



Mime
View raw message