zurb-foundation 3.1.1 → 3.2.0.rc1

data/.rbenv-version

@@ -0,0 +1 @@
+1.9.3-p194

data/CHANGELOG.md

@@ -0,0 +1,51 @@
+# Changelog
+We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.
+
+---
+
+### 3.1.1- September 19, 2012
+Updating Top Bar navigation implementation pattern to wrap `.contain-to-grid` and/or `.fixed` around the `nav` element to prevent horizontal scroll bars when using `.contain-to-grid`. Updated the topBar breakpoint option so users only need to update the Scss variable.
+
+### **3.1**- September 14, 2012
+Launched new features, a new Add-ons section to the marketing site, Right to left language support, and fixed bugs.
+
+With this release of Foundation, we include:
+* Downloadable HTML template pages that can be copy/pasted into an existing project or added to your project upon downloading from the customizer.
+* The Add-on's section includes a round-up of all the playground pieces, etc that aren't officially included in Foundation, but built to work with it. This includes: [Templates](http://foundation.zurb.com/templates.php), [Icon Fonts](http://foundation.zurb.com/icon-fonts.php), [Off-Canvas Layouts](http://foundation.zurb.com/off-canvas.php), [Responsive Tables](http://foundation.zurb.com/responsive-tables.php), [SVG Social Icons](http://foundation.zurb.com/social-icons.php), and [Omnigraffle Stencils](http://foundation.zurb.com/stencils.php).
+* Foundation now includes a [responsive top navigation](http://foundation.zurb.com/navigation.php) bar that lets you have control over when it responds and what you include in it. We've made it really easy to customize using Scss.
+* Right-to-left language support straight out of the box. You can adjust this in the settings.scss file or upon downloading with the customizer.
+* New UI Styles for Progress Bars and Image Thumbs.
+* Updated to include jQuery 1.8.1
+* Orbit thumbnail documentation.
+* Better Reveal size documentation.
+
+### 3.0.9- August 14, 2012
+Bug fixes and locking down dependencies.
+
+### 3.0.8- August 10, 2012
+Numerous bugfixes. Added media query toggle plugin. Removed marketing site from repository and included a new `test/` directory to help contributors test patches.
+
+New features: Media Query Toggler, block-grid mobile layouts, font-size customizer options and included modular scale gem as dependancy for SCSS version.
+
+### 3.0.7- July 30, 2012
+Numerous JS bug fixes, added generators for Rails and refactored SCSS directory for better maintainability and scalability over time. CSS files weren't affected by this refactoring.
+
+### 3.0.6- July 20, 2012
+Numerous bugfixes including dropdown buttons on touch devices, Modernizr update with IE8Compat, split button colors, and more. Split out the functions in app.js to be part of the Gem and only initialized in app.js, so you can keep a clean distinction between your JS and Foundation's (if you want to). Added an [accordion](http://foundation.zurb.com/elements.php) element.
+
+### 3.0.5- July 10, 2012
+Fixed Compass performance issues by separating out each Foundation file and removing extraneous imports.
+
+### 3.0.4- July 6, 2012
+Fixed a number of bugs around the Sass/Gem installs and documentation. Some smaller items:
+* Fixed a bug with dropdown buttons to allow clicking on their anchors again.
+* Added styles for HTML5 (and other) input styles, not just text.
+* Added error states back to the forms documentation.
+* Flyouts in a nav bar can now expand up as well as down.
+* In SCSS you can now set $base-size correctly, but we're still working to correct modifying the $ratio variable.
+
+### 3.0.1 to 3.0.3- July 2 to July 4, 2012
+Various bug fixes with the downloader, gem, and Sass install.
+
+### **3.0**- June 30, 2012
+Initial launch of Foundation 3, deprecating Foundation 2.2.1. Major enhancements include Sass/SCSS development, new grid system with box-sizing: border-box, new form styles, new UI elements, retooled download and install options, new docs, new marketing site.

data/README.md

@@ -3,9 +3,9 @@ Welcome to Foundation
 
 Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.
 
-Homepage:      http://foundation.zurb.com  
-Documentation: http://foundation.zurb.com/docs  
-Download:      http://foundation.zurb.com/download.php  
+Homepage:      http://foundation.zurb.com
+Documentation: http://foundation.zurb.com/docs
+Download:      http://foundation.zurb.com/download.php
 
 Foundation is MIT-licensed and absolutely free to use. Foundation wouldn't be possible without the support of the entire ZURB team, our friends and colleagues who gave feedback, and some luminaries who did some heavy lifting that we took advantage of (thanks guys).
 
@@ -38,6 +38,7 @@ WordPress
 Joomla
 
 * [Joomla Template](https://github.com/meridiansoftech/joomla_foundation_template) by Arnold Mwumva Ford, Meridian Softech
+* [Joomla Template](https://github.com/antonydoyle/siegeengine) by Antony Doyle, Siege21
 
 Drupal
 
@@ -57,7 +58,8 @@ MODX
 
 .NET
 
-* [NuGet Package for ASP.Net MVC](http://www.nuget.org/packages/Zurb_Foundation_MVC3) by Edward Charbeneau, @EdCharbeneau
+* [NuGet Package for ASP.Net MVC](http://www.nuget.org/packages/Foundation3_MVC4) by Edward Charbeneau, @EdCharbeneau
+
 
 CodeIgniter
 
@@ -90,6 +92,10 @@ Modular Scale
 
 * [Modular Scale](https://github.com/scottkellum/modular-scale) by Mason Wendell and Scott Kellum
 
+Ruby on Rails SASS Gems
+
+* [Foundation Icons 2](https://github.com/zaiste/foundation-icons-sass-rails) by J. P. Nowak
+
 MIT Open Source License
 =======================
 

data/index.html

@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 
 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
 <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
@@ -18,11 +16,6 @@
 
   <script src="vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
 
-  <!-- IE Fix for HTML5 Tags -->
-  <!--[if lt IE 9]>
-    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-  <![endif]-->
-
 </head>
 <body>
 

data/lib/foundation/generators/USAGE

@@ -3,7 +3,7 @@ Description:
 
 Example:
   rails g foundation:install
-  
+
   This will replace the default application assets:
     /app/assets/javascripts/application.js
     /app/assets/stylesheets/application.css

data/lib/foundation/generators/layout_generator.rb

@@ -7,21 +7,22 @@ module Foundation
       argument :layout_name, :type => :string, :default => 'application', :banner => 'layout_name'
 
       class_option :haml, :desc => 'Generate HAML layout instead of ERB.', :type => :boolean
-      
+      class_option :slim, :desc => 'Generate Slim layout instead of ERB.', :type => :boolean
+
       def create_layout
         if options.haml?
           template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
-        elsif
+        elsif options.slim?
           template 'application.html.slim', "app/views/layouts/#{file_name}.html.slim"
         else
           template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"
         end
       end
-      
+
       private
         def file_name
           layout_name.underscore.downcase
         end
     end
   end
-end
+end

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "3.1.1"
+  VERSION = "3.2.0.rc1"
 end

data/marketing/.rbenv-version

@@ -0,0 +1 @@
+1.9.3-p194

data/scss/foundation.scss

@@ -1,5 +1,4 @@
 @charset "UTF-8";
-
 // Foundation Features
 // =============
 
@@ -16,3 +15,6 @@
 @import "foundation/common/base";
 
 @import "foundation/components/grid", "foundation/components/modules/all";
+
+// Media Queries Overrides
+@import "foundation/components/modules/mqueries";

data/scss/foundation/_settings.scss

@@ -6,20 +6,7 @@ $rowWidth: 1000px !default;
 $columnGutter: 30px !default;
 $totalColumns: 12 !default;
 $mobileTotalColumns: 4 !default;
-
-// Text Direction Settings
-
-$textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
-$defaultFloat: left !default; // Change this to 'right' for right-to-left languages
-$defaultOpposite: right !default; // Change this to 'left' for right-to-left languages
-
-@if $textDirection == ltr {
-  $defaultFloat: left;
-  $defaultOpposite: right;
-} @else {
-  $defaultFloat: right;
-  $defaultOpposite: left;
-}
+$blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported
 
 // Colors Settings
 
@@ -38,11 +25,27 @@ $darkEdge: rgba(#000, .2) !default;
 
 $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $headerFontWeight: bold !default;
+$headerFontStyle: normal !default;
 $headerFontColor: #222 !default;
 $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $bodyFontWeight: normal !default;
+$bodyFontStyle: normal !default;
 $bodyFontColor: $txtColor !default;
 
+// Text Direction Settings
+
+$textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
+$defaultFloat: left !default; // Change this to 'right' for right-to-left languages
+$defaultOpposite: right !default; // Change this to 'left' for right-to-left languages
+
+@if $textDirection == ltr {
+  $defaultFloat: left;
+  $defaultOpposite: right;
+} @else {
+  $defaultFloat: right;
+  $defaultOpposite: left;
+}
+
 // Button Settings
 
 $buttonRadius: 3px !default;
@@ -55,41 +58,80 @@ $largeBtnBase: $btnBase + 5 !default;
 // Form Settings
 
 $formSpacing: 12px !default;
+$labelFontWeight: 500 !default;
+$labelFontColor: lighten(#000, 30%) !default;
+$labelBtmMargin: 3px !default;
+$inputFontColor: rgba(0,0,0,0.75) !default;
+$inputFontSize: 14px !default;
+$inputBgColor: #fff !default;
+$inputFocusBgColor: darken(#fff, 2%) !default;
+$inputBorderColor: darken(#fff, 20%) !default;
+$inputFocusBorderColor: darken(#fff, 30%) !default;
+$inputBorderStyle: solid !default;
+$inputBorderWidth: 1px !default;
+$inputBorderRadius: 2px !default;
+$fieldsetBorderRadius: 3px !default;
+
+// Custom Form Settings
+
+$custFormBorderColor: #ccc !default;
+$custFormBgColor: #fff !default;
+$custCheckColor: #222 !default;
+$custSelectCurrentFontColor: #141414 !default;
+$custSelectBgColor: #fff !default;
+$custSelectBorderColor: #ddd !default;
+$custSelectTriangleColor: #aaa !default;
+$custSelectTriangleColorOpen: #222 !default;
+$custSelectDropHeight: 200px !default;
+$custDropdownBgColor: #fff !default;
+$custDropdownBorderColor: darken(#fff, 20%) !default;
+$custDropdownFontColor: #555 !default;
+$custDropdownSelectedBgColor: lighten(#2ba6cb, 40%) !default;
+$custDropdownSelectedFontColor: #000 !default;
+$custFormDisabledBgColor: #ddd !default;
 
 // Tab Settings
 
 $tabHeight: 40px !default;
+$tabTermFontSize: 12px;
 
 // Nav Bar Settings
 
 $navBarHeight: 40px !default;
 $navFlyoutBaseWidth: 250px !default;
 
+// Top Bar Settings
+
+$topBarBgColor: #222 !default;
+$topBarHeight: 45px !default;
+$topBarHeightMobile: 45px !default;
+$topBarBtmMargin: 30px !default;
+$topBarTitleWeight: bold !default;
+$topBarTitleSize: 17px !default;
+$topBarLinkColor: #fff !default;
+$topBarLinkWeight: bold !default;
+$topBarLinkSize: 13px !default;
+$topBarDropBgColor: #222 !default;
+$topBarDropLinkColor: #fff !default;
+$topBarDropToggleSize: 5px !default;
+$topBarDropToggleColor: #fff !default;
+$topBarDropToggleAlpha: 0.5 !default;
+$topBarSearchWidth: 200px !default;
+$topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
+$topBarNavToggleSize: 8px !default;
+
 // UI Settings
 
 $thumbRadius: 3px !default;
-
 $progBarHeight: 25px !default;
-$progBarBorderColor: darken($white, 20%) !default;
+$progBarBorderColor: darken(#fff, 20%) !default;
 $progBarBorderSize: 1px !default;
 $progBarPad: 2px !default;
-
-// Off Canvas Width Settings
-
-$mainWidth: 80% !default;
-$complementaryWidth: 20% !default;
-
-// Modular Scale Settings
-
-// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
-$baseFontSize: 14px !default;
-$importantModNum: 44px !default;
-$base-size: $baseFontSize $importantModNum;
-// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
-// http://www.modularscale.com by Tim Brown
-// https://github.com/scottkellum/modular-scale by scottkellum
+$linkListBottomMargin: 17px -22px !default;
+$tableBorderRadius: 3px !default;
 
 // Tooltip Settings
+
 $hasTipBorderBottom: dotted 1px #ccc !default;
 $hasTipFontWeight: bold !default;
 $hasTipFontColor: #333 !default;
@@ -97,29 +139,99 @@ $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%) !default;
 $hasTipFontColorHover: $mainColor !default;
 $tooltipBackgroundColor: #000 !default;
 $tooltipBackgroundOpacity: 0.85 !default;
-$tooltipFontSize: 12 !default;
+$tooltipFontSize: 12px !default;
 $tooltipFontWeight: bold !default;
 $tooltipFontColor: #fff !default;
 $tapToCloseFontSize: 10 !default;
 $tapToCloseFontWeight: normal !default;
 $tapToCloseFontColor: #888 !default;
-$tooltipFontSizeScreenSmall: 14 !default;
-$tooltipBackgroundOpacityScreenSmall: 0.85 !default;
+$tooltipFontSizeScreenSm: 14 !default;
+$tooltipBgOpacityScreenSm: 0.85 !default;
+$tooltipBorderRadius: 4px !default;
+
+// Pricing Table Settings
+
+$priceTableBorder: solid 1px #ddd !default;
+$priceTitleBgColor: #ddd !default;
+$priceTitlePadding: 15px 20px !default;
+$priceTitleAlign: center !default;
+$priceTitleColor: #333 !default;
+$priceTitleWeight: bold !default;
+$priceTitleSize: 16px !default;
+
+$priceMoneyBgColor: #eee !default;
+$priceMoneyPadding: 15px 20px !default;
+$priceMoneyAlign: center !default;
+$priceMoneyColor: #333 !default;
+$priceMoneyWeight: normal !default;
+$priceMoneySize: 20px !default;
+
+$priceBgColor: #fff !default;
+$priceDescColor: #777 !default;
+$priceDescPadding: 15px !default;
+$priceDescAlign: center !default;
+$priceDescFontSize: 12px !default;
+$priceDescWeight: normal !default;
+$priceDescLineHeight: 1.4 !default;
+$priceDescBtmBorder: dotted 1px #ddd !default;
+
+$priceItemColor: #333 !default;
+$priceItemPadding: 15px !default;
+$priceItemAlign: center !default;
+$priceItemFontSize: 14px !default;
+$priceItemWeight: normal !default;
+$priceItemBtmBorder: dotted 1px #ddd !default;
+
+$priceCtaBgColor: #f5f5f5 !default;
+$priceCtaAlign: center !default;
+$priceCtaPadding: 20px !default;
+
+// Orbit Settings
+
+$orbitCaptionBgColorOldBrowser: #000 !default;
+$orbitCaptionBgColor: rgba(0,0,0,.6) !default;
+$orbitCaptionFontColor: #fff !default;
+$orbitBulletNavColor: #999 !default;
+$orbitBulletNavColorActive: #222 !default;
+$orbitHasThumbBorderColor: #000 !default;
+$orbitHasThumbBorderWidth: 2px !default;
+$orbitHasThumbBorderStyle: solid !default;
+$orbitSlideNumBgColor: rgba(0,0,0,0.7) !default;
+$orbitSlideNumFontColor: #fff !default;
+$orbitSlideNumPadding: 5px !default;
+
+// Clearing Settings
+$clearingBg: rgba(0,0,0,0.8) !default;
+$clearingOldBrowserBg: rgb(0,0,0) !default;
+$clearingCaptionBg: rgba(0,0,0,0.7) !default;
+$clearingCaptionOldBrowserBg: rgb(0,0,0) !default;
+$clearingCaptionFontColor: #fff !default;
+$clearingCloseColor: #fff !default;
+$clearingArrowColor: #fff !default;
+$clearingArrowSize: 16px !default;
+$clearingCarouselOldBrowserBg: rgb(0,0,0) !default;
+$clearingCarouselBg: rgba(0,0,0,0.75) !default;
+$clearingCarouselHeight: 150px !default;
+$clearingCarouselThumbHeight: 150px !default;
+$clearingCarouselThumbWidth: 175px !default;
+$clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255) !default;
+$clearingImgOldBrowserBg: rgb(0,0,0) !default;
+$clearingImgBg: rgba(0,0,0,0.75) !default;
 
-// Top Bar Settings
+// Off Canvas Width Settings
 
-$topBarBgColor: #222 !default;
-$topBarHeight: 45px !default;
-$topBarBtmMargin: 30px !default;
-$topBarTitleWeight: bold !default;
-$topBarTitleSize: ms(1) !default;
-$topBarLinkColor: #fff !default;
-$topBarLinkWeight: bold !default;
-$topBarLinkSize: ms(0) - 1 !default;
-$topBarDropToggleSize: 5px !default;
-$topBarSearchWidth: 200px !default;
-$topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
-$topBarNavToggleSize: 8px !default;
+$mainWidth: 80% !default;
+$complementaryWidth: 20% !default;
+
+// Modular Scale Settings
+
+// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
+$baseFontSize: 14px !default;
+$importantModNum: 44px !default;
+$base-size: $baseFontSize $importantModNum;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// https://github.com/scottkellum/modular-scale by scottkellum
 
 // Media Queries
 

data/scss/foundation/common/_forms.scss

@@ -14,16 +14,12 @@
     }
   }
 
-  label { font-size: ms(0); color: lighten($black, 30%); cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px;
+  label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin;
 
     &.right { float: none; text-align: right; }
     &.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
   }
 
-  @media only screen and (max-width: $screenSmall - 1) {
-    label.right { text-align: left; }
-  }
-
   .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1; }
   a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
   span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
@@ -31,11 +27,11 @@
   .prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultFloat, 2px); overflow:hidden; }
   .postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
 
-  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { font-family: $bodyFontFamily; border: 1px solid darken($white, 20%); @include border-radius(2px); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: rgba(0,0,0,0.75); display: block; font-size: ms(0); margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
+  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { background-color: $inputBgColor; font-family: inherit; border: $inputBorderWidth $inputBorderStyle $inputBorderColor; @include border-radius($inputBorderRadius); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: $inputFontColor; display: block; font-size: $inputFontSize; margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
 
     &.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
 
-    &:focus { background: darken($white, 2%); outline: none !important; border-color: darken($white, 30%); }
+    &:focus { background: $inputFocusBgColor; outline: none !important; border-color: $inputFocusBorderColor; }
     &[disabled] { background-color: #ddd; }
   }
 
@@ -44,7 +40,7 @@
   select { width: 100%; }
 
   /* Fieldsets */
-  fieldset { border: solid 1px #ddd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 12px 12px 0; margin: 18px 0;
+  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px 12px 0; margin: 18px 0;
 
     legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
   }
@@ -52,39 +48,36 @@
   /* Errors */
   .error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
   .error label, label.error { color: $alertColor; }
-  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
-
-  @media only screen and (max-width: $screenSmall - 1) {
-    @for $i from 1 through $totalColumns {
-      input[type="text"].#{convert-number-to-word($i)}, input[type="password"].#{convert-number-to-word($i)}, input[type="date"].#{convert-number-to-word($i)}, input[type="datetime"].#{convert-number-to-word($i)}, input[type="email"].#{convert-number-to-word($i)}, input[type="number"].#{convert-number-to-word($i)}, input[type="search"].#{convert-number-to-word($i)}, input[type="tel"].#{convert-number-to-word($i)}, input[type="time"].#{convert-number-to-word($i)}, input[type="url"].#{convert-number-to-word($i)}, textarea.#{convert-number-to-word($i)} { width: 100% !important; }
-    }
+  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
+  .error textarea, textarea.error {
+    &:focus { background: darken($white, 2%); border-color: darken($white, 30%); }
   }
-
   /* Custom Forms ---------------------- */
 
   form.custom {
 
-    span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px #ccc; background: #fff;
+    span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
 
       &.radio { @include border-radius(100px); }
       &.checkbox {
         &:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: 14px; color: #fff; }
       }
       &.radio.checked {
-        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: #222; position: relative; top: 3px; #{$defaultFloat}: 3px; }
+        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
       }
       &.checkbox.checked {
-        &:before { content: "\00d7"; color: #222; }
+        &:before { content: "\00d7"; color: $custCheckColor; }
       }
     }
     div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
 
-      a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; border: solid 1px #ddd; color: #141414; background-color: #fff; white-space: nowrap; }
-      a.selector { position: absolute; width: 27px; height: 28px; display: block; #{$defaultOpposite}: 0; top: 0; border: solid 1px #ddd;
-        &:after { content: ""; display: block; @include cssTriangle(5px, #aaa, top); position: absolute; #{$defaultFloat}: 50%; top: 50%; margin-top: -2px; margin-#{$defaultFloat}: -5px;  }
+      ul { overflow-y: auto; max-height: $custSelectDropHeight; }
+      a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; border: solid 1px $custSelectBorderColor; color: $custSelectCurrentFontColor; background-color: $custSelectBgColor; white-space: nowrap; }
+      a.selector { position: absolute; width: 27px; height: 28px; display: block; #{$defaultOpposite}: 0; top: 0; border: solid 1px $custSelectBorderColor;
+        &:after { content: ""; display: block; @include cssTriangle(5px, $custSelectTriangleColor, top); position: absolute; #{$defaultFloat}: 50%; top: 50%; margin-top: -2px; margin-#{$defaultFloat}: -5px;  }
       }
       &:hover, &.open {
-        a.selector { &:after { @include cssTriangle(5px, #222, top); } }
+        a.selector { &:after { @include cssTriangle(5px, $custSelectTriangleColorOpen, top); } }
       }
 
       &.open ul { display: block; z-index: 10; }
@@ -100,23 +93,23 @@
       &.open.expand ul { width: 100% !important; }
     }
 
-    div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: 0; top: 27px; margin: 0; padding: 0; background: #fff; background: rgba(#fff,0.95); border: solid 1px darken($white, 20%);
+    div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: 0; top: 27px; margin: 0; padding: 0; background: $custDropdownBgColor; background: rgba($custDropdownBgColor,0.95); border: solid 1px $custDropdownBorderColor;
 
-      li { color: #555; font-size: ms(0) - 1; cursor: pointer; padding: 3px; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
-      li.selected { background: lighten($mainColor, 40%); color: #000;
+      li { color: $custDropdownFontColor; font-size: ms(0) - 1; cursor: pointer; padding: 3px; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
+      li.selected { background: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
         &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; }
       }
-      li:hover { background-color: lighten($mainColor, 45%); color: #222;
-        &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; color: lighten($mainColor, 25%); }
+      li:hover { background-color: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
+        &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; color: darken($custDropdownSelectedBgColor, 10%); }
       }
-      li.selected:hover { background: lighten($mainColor, 40%); cursor: default; color: #000;
-        &:after { color: #000; }
+      li.selected:hover { background: $custDropdownSelectedBgColor; cursor: default; color: $custDropdownSelectedFontColor;
+        &:after { color: $custDropdownSelectedFontColor; }
       }
       &.show { display: block; }
     }
 
     /* Custom input, disabled */
-    .custom.disabled { background-color: #ddd; }
+    .custom.disabled { background-color: $custFormDisabledBgColor; }
   }
 
   /* Correct FF custom dropdown height */