zurb-foundation 4.1.6 → 4.2.0

data/docs/components/top-bar.html.erb

@@ -76,7 +76,7 @@
       <div class="large-12 columns">
 
         <h3>Build With HTML Classes</h3>
-        <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>
+        <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS. The top bar is hoverable by default but can be changed to a click event by adding a simple <code>data-option="is_hover:false"</code> to the <code>&lt;nav&gt;</code> element. <a href="#clickable">See an example below</a>.</p>
 
         <h5>Basic Needs</h5>
         <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, a <code>ul class="right/left</code> element enclosed in a <code>section class="top-bar-section"</code>, and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
@@ -91,7 +91,7 @@
         <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
 
         <h5>Sticky Top Bar</h5>
-        <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.</p>
+        <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. <strong>Note:</strong> If you are using Scss, you can control the default <code>sticky</code> class by adjusting the <code>$topbar-sticky-class</code> variable. <strong>Make sure the JS variable for <code>stickyClass</code> matches whatever class you use in the variable.</strong></p>
 
 <%= code_example '
 <nav class="top-bar">
@@ -206,51 +206,128 @@
   </section>
 </nav>', :html %>
 
+      <a name="clickable"></a>
+      <h4>Clickable Topbar</h4>
+      <p>You can now make the top bar clickable by adding a data-attribute to the nav element. Here's an example:</p>
+      <nav class="top-bar" data-options="is_hover:false">
+        <ul class="title-area">
+          <!-- Title Area -->
+          <li class="name">
+            <h1><a href="#">Clickable Top Bar</a></h1>
+          </li>
+          <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+        </ul>
+
+        <section class="top-bar-section">
+
+          <!-- Right Nav Section -->
+          <ul class="right">
+            <li class="divider hide-for-small"></li>
+            <li class="has-dropdown"><a href="#">Main Item 1</a>
+
+              <ul class="dropdown">
+                <li><label>Dropdown Level 1 Label</label></li>
+                <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
+
+                  <ul class="dropdown">
+                    <li><a href="#">Dropdown Level 2a</a></li>
+                    <li><a href="#">Dropdown Level 2b</a></li>
+                    <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
+
+                      <ul class="dropdown">
+                        <li><a href="#">Dropdown Level 3a</a></li>
+                        <li><a href="#">Dropdown Level 3b</a></li>
+                        <li><a href="#">Dropdown Level 3c</a></li>
+                      </ul>
+                    </li>
+                    <li><a href="#">Dropdown Level 2d</a></li>
+                    <li><a href="#">Dropdown Level 2e</a></li>
+                    <li><a href="#">Dropdown Level 2f</a></li>
+                  </ul>
+                </li>
+                <li><a href="#">Dropdown Level 1b</a></li>
+                <li><a href="#">Dropdown Level 1c</a></li>
+                <li class="divider"></li>
+                <li><label>Dropdown Level 1 Label</label></li>
+                <li><a href="#">Dropdown Level 1d</a></li>
+                <li><a href="#">Dropdown Level 1e</a></li>
+                <li><a href="#">Dropdown Level 1f</a></li>
+                <li class="divider"></li>
+                <li><a href="#">See all &rarr;</a></li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+      </nav>
+
+<%= code_example '
+<nav class="top-bar" data-options="is_hover:false">', :html %>
+      <hr>
+
       <h4>Available SCSS Variables</h4>
       <p>We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.</p>
 
 <%= code_example '
 /* Background color for the top bar */
-$topbar-bg: #111;
+$topbar-bg:                            #111;
 
 /* Height and margin */
-$topbar-height: 45px;
-$topbar-margin-bottom: emCalc(30px);
+$topbar-height:                        45px;
+$topbar-margin-bottom:                 emCalc(30px);
 
 /* Control Input height for top bar */
-$topbar-input-height: 2.45em;
+$topbar-input-height:                  2.45em;
 
 /* Controlling the styles for the title in the top bar */
-$topbar-title-weight: bold;
-$topbar-title-font-size: emCalc(17px);
-
-/* Set the link colors and styles for top-level nav */
-$topbar-link-color: #fff;
-$topbar-link-weight: bold;
-$topbar-link-font-size: emCalc(13px);
+$topbar-title-weight:                  bold;
+$topbar-title-font-size:               emCalc(17px);
 
 /* Style the top bar dropdown elements */
-$topbar-dropdown-bg: #333;
-$topbar-dropdown-link-color: #fff;
-$topbar-dropdown-toggle-size: 5px;
-$topbar-dropdown-toggle-color: #fff;
-$topbar-dropdown-toggle-alpha: 0.5;
-$dropdown-label-color: #555;
+$topbar-dropdown-bg:                   #222;
+$topbar-dropdown-link-color:           #fff;
+$topbar-dropdown-link-bg:              lighten($topbar-bg, 5%);
+$topbar-dropdown-toggle-size:          5px;
+$topbar-dropdown-toggle-color:         #fff;
+$topbar-dropdown-toggle-alpha:         0.5;
+
+/* Set the link colors and styles for top-level nav */
+$topbar-link-color:                    #fff;
+$topbar-link-color-hover:              #fff;
+$topbar-link-color-active:             #fff;
+$topbar-link-weight:                   bold;
+$topbar-link-font-size:                emCalc(13px);
+$topbar-link-hover-lightness:          -30%; /* Darken by 30% */
+$topbar-link-bg-hover:                 darken($topbar-bg, 3%);
+$topbar-link-bg-active:                darken($topbar-bg, 3%);
+
+$topbar-dropdown-label-color:          #555;
+$topbar-dropdown-label-text-transform: uppercase;
+$topbar-dropdown-label-font-weight:    bold;
+$topbar-dropdown-label-font-size:      emCalc(10px);
 
 /* Top menu icon styles */
-$topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: emCalc(13px);
-$topbar-menu-link-weight: bold;
-$topbar-menu-link-color: #fff;
-$topbar-menu-icon-color: #fff;
-$topbar-menu-link-color-toggled: #888;
-$topbar-menu-icon-color-toggled: #888;
+$topbar-menu-link-transform:           uppercase;
+$topbar-menu-link-font-size:           emCalc(13px);
+$topbar-menu-link-weight:              bold;
+$topbar-menu-link-color:               #fff;
+$topbar-menu-icon-color:               #fff;
+$topbar-menu-link-color-toggled:       #888;
+$topbar-menu-icon-color-toggled:       #888;
 
 /* Transitions and breakpoint styles */
-$topbar-transition-speed: 300ms;
-$topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout', :css %>
+$topbar-transition-speed:              300ms;
+$topbar-breakpoint:                    emCalc(940px); /* Change to 9999px for always mobile layout */
+$topbar-media-query:                   "only screen and (min-width:"#{$topbar-breakpoint}")";
+
+/* Divider Styles */
+$topbar-divider-border-bottom:         solid 1px lighten($topbar-bg, 10%);
+$topbar-divider-border-top:            solid 1px darken($topbar-bg, 10%);
+
+/* Sticky Class */
+$topbar-sticky-class:                  ".sticky";', :css %>
 
-        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
         <hr>
 
@@ -263,7 +340,7 @@ $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout'
 
         <h5>Optional JavaScript Configuration</h5>
 
-        <p>Top bar options can only be passed in during initialization at this time.</p>
+        <p>Top bar now supports <code>data-options</code> configuration.</p>
 
     <%= code_example "
 {
@@ -271,6 +348,8 @@ $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout'
   stickyClass : 'sticky',
   custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
   back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
+  is_hover: true,
+  scrolltop : true, // jump to top when sticky nav menu toggle is clicked
   init : false
 }", :js %>
       </div>

data/docs/components/type.html.erb

@@ -347,7 +347,8 @@ $hr-margin:                            emCalc(20px);
 
 /* We use these to style lists */
 $list-style-position:                  outside;
-$list-side-margin:                     emCalc(18px);
+$list-side-margin:                     emCalc(20px);
+$list-nested-margin:                   emCalc(20px);
 $definition-list-header-weight:        bold;
 $definition-list-header-margin-bottom: .3em;
 $definition-list-margin-bottom:        emCalc(12px);

data/docs/components/visibility.html.erb

@@ -61,22 +61,22 @@
 <%= code_example '
 /* The show classes */
 .show-for-small       /* Visible up to 768px */
-.show-for-medium-down /* Visible from 1280px down */
+.show-for-medium-down /* Visible from 768px down */
 .show-for-medium      /* Visible between 768px and 1280px */
-.show-for-medium-up   /* Visible from 1280px up */
-.show-for-large-down  /* Visible from 1440px down */
+.show-for-medium-up   /* Visible from 768px up */
+.show-for-large-down  /* Visible from 1280px down */
 .show-for-large       /* Visible between 1280px and 1440px */
-.show-for-large-up    /* Visible from 1440px up */
+.show-for-large-up    /* Visible from 1280px up */
 .show-for-xlarge      /* Visible above 1440px only */
 
 /* The hide classes */
 .hide-for-small       /* Hidden up to 768px */
-.hide-for-medium-down /* Hidden from 1280px down */
+.hide-for-medium-down /* Hidden from 768px down */
 .hide-for-medium      /* Hidden between 768px and 1280px */
-.hide-for-medium-up   /* Hidden from 1280px up */
-.hide-for-large-down  /* Hidden from 1440px down */
+.hide-for-medium-up   /* Hidden from 768px up */
+.hide-for-large-down  /* Hidden from 1280px down */
 .hide-for-large       /* Hidden between 1280px and 1440px */
-.hide-for-large-up    /* Hidden from 1440px up */
+.hide-for-large-up    /* Hidden from 1280px up */
 .hide-for-xlarge      /* Hidden above 1440px only */
 
 /* The orientation classes */

data/docs/css/normalize.scss

@@ -316,7 +316,7 @@ html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"] {
     -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
+    cursor: $cursor-pointer-value; /* 3 */
 }
 
 /**
@@ -325,7 +325,7 @@ input[type="submit"] {
 
 button[disabled],
 html input[disabled] {
-    cursor: default;
+    cursor: $cursor-default-value;
 }
 
 /**

data/docs/css/qunit.css

@@ -98,7 +98,7 @@
 }
 
 #qunit-tests li strong {
-	cursor: pointer;
+	cursor: $cursor-pointer-value;
 }
 
 #qunit-tests li a {

data/docs/index.html.erb

@@ -126,6 +126,12 @@
           <dd>We've made a dropdown plugin that makes it easy to attach a popover dropdown to any element on the page.</dd>
         </dl>
       </div>
+      <div class="large-4 columns end">
+        <dl>
+          <dt><h5><a href="components/dropdown.html">Interchange</a></h5></dt>
+          <dd>This plugin let's you load up the appropriate size image based on media queries that you define.</dd>
+        </dl>
+      </div>
     </div>
 
     <hr>
@@ -137,7 +143,7 @@
       <div class="large-4 columns">
         <dl>
           <dt><h5>css</h5></dt>
-          <dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. You can add <code>app.css</code> or any other stylesheet to use for custom styles that will sit on top of the Foundation core as overrides.</dd>
+          <dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. You'll also see <code>normalize.css</code>, which we use for resets. Add another stylesheet on top of Foundation to override defaults.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
@@ -181,7 +187,7 @@
           <h6 class="subheader"><strong>Using the Gem?</strong> You'll see a couple extra pieces in your project upon creation. These are:</h6>
           <dl>
             <dt>scss/</dt>
-            <dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the foundation gem import and commented portions you can pick and choose.) and <code>normalize.scss</code>. Override the Foundation styles within your app.scss file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation.</dd>
+            <dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the foundation gem import and commented portions you can pick and choose). Override the Foundation styles within your <code>app.scss</code> file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation. You'll also notice that the directory names are slightly different. Compass defaults to "stylesheets", "javascripts", and "image".</dd>
             <dt></i>config.rb</dt>
             <dd>This file is used by <a href="http://compass-style.org">Compass</a> to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.</dd>
           </dl>
@@ -204,9 +210,11 @@
   <meta name="viewport" content="width=device-width" />
   <title>Foundation 4</title>
 
+  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
   <link rel="stylesheet" href="css/normalize.css" />
-  <!-- If you are using CSS version, add this -->
   <link rel="stylesheet" href="css/foundation.css" />
+
+  <!-- If you are using the gem version, you need this only -->
   <link rel="stylesheet" href="css/app.css" />
 
   <script src="js/vendor/custom.modernizr.js"></script>
@@ -235,8 +243,9 @@
   <script src="js/foundation/foundation.section.js"></script>
   <script src="js/foundation/foundation.tooltips.js"></script>
   <script src="js/foundation/foundation.topbar.js"></script>
+  <script src="js/foundation/foundation.interchange.js"></script>
   <script>
-  $(document).foundation();
+    $(document).foundation();
   </script>
 </body>
 </html>
@@ -259,7 +268,7 @@
           <dt><h5>CSS &amp; Modernizr</h5></dt>
           <dd>The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.</dd>
           <dt>CSS</dt>
-          <dd>We include <code>foundation.min.css</code> and <code>foundation.css</code>. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
+          <dd>We include <code>foundation.min.css</code> and <code>foundation.css</code> with a default CSS download. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
         </dl>
       </div>
       <div class="large-4 columns">

data/docs/javascript.html.erb

@@ -46,13 +46,11 @@
 
         <h5>Initialize Foundation</h5>
         <p>After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.</p>
-        <p>It is recommended that you initialize on document ready</p>
+        <p>It is recommended that you initialize Foundation at the end of the page <code>&lt;body&gt;</code>.</p>
 
 <%= code_example '
 <script>
-  $(function(){
-    $(document).foundation();    
-  })
+  $(document).foundation();
 </script>
 ', :html %>
 

data/docs/layout.html.erb

@@ -116,7 +116,7 @@
         .foundation()
         .foundation('joyride', 'start');
       <% else %>
-        .foundation();
+        .foundation(null, null, null, null, true);
       <% end %>
 
       // For Kitchen Sink Page

data/docs/rails.html.erb

@@ -27,6 +27,9 @@ end
       <div class="panel">
         <p><strong>NOTE:</strong> Make sure that your restart your server after running <code>bundle install</code>. Otherwise the asset pipeline may not recognize the new Foundation files.</p>
       </div>
+      
+      <h4>Rails 4.0</h4>
+      <p>Rails 4.0 removed the assets group from Gemfile. So make sure to move the zurb-foundation gem out of the assets group, when you're updating your rails app.</p>
 
       <h4>Easy Install</h4>
       <p>Simply run <code>rails g foundation:install</code> to configure your application to use Foundation. That's it!</p>
@@ -73,4 +76,4 @@ javascript_include_tag "vendor/custom.modernizr"
     <%= render "_sidebar.html.erb" %>
   </div>
   </div>
-</div>
+</div>

data/docs/sass.html.erb

@@ -43,7 +43,9 @@
     <hr>
 
     <h3>Using Sass Standalone</h3>
-    <p>With Foundation 4, we've removed all dependencies from the framework. This means you can use Foundation with Sass alone and add Compass, Bourbon, or whatever on top of it. To help get going using only Sass, you'll just need to download the <a href="https://github.com/zurb/foundation">files from Github</a> (grab the scss/ and js/ directories) and put them into your project directory. From there you just need to <code>@import</code> the parts of Foundation you need.</p>
+    <p>With Foundation 4, we've removed all dependencies from the framework. This means you can use Foundation with Sass alone and add Compass, Bourbon, or whatever on top of it. To help get going using only Sass, you'll just need to download the <a href="https://github.com/zurb/foundation/tree/scss-standalone">files from Github</a> and put them into your project directory. From there you just need to <code>@import</code> the parts of Foundation you need.</p>
+
+    <a class="small button secondary" href="https://github.com/zurb/foundation/tree/scss-standalone">Sass Standalone Branch on Github</a>
 
     <p>To import all of Foundation:</p>
 <%= code_example '
@@ -209,1042 +211,1291 @@ bundle exec compass create . -r zurb-foundation --using foundation
 
     <hr>
 
+    <a name="codekit"></a>
+    <h3>Compiling with CodeKit</h3>
+    <p>Previous version of Foundation were a bit harder to compile with codekit because of the structure of the Foundation files. We just went through a round of testing with a default project directory, created with the gem. Here are the instructions to follow to get CodeKit working properly:</p>
+
+    <ul>
+      <li>Create a project: <kbd>compass create <em>project-name</em> -r zurb-foundation --using foundation</kbd></li>
+      <li>Open CodeKit and drag that project folder into the side panel or add it with the "+" button.</li>
+      <li>Compile away!</li>
+    </ul>
+
+    <p><em>This works with the default version of Sass and Compass that CodeKit comes with. Since Compass isn't a dependency for Foundation any longer, if you want to use it, make sure you have it installed and @imported at the top of your main .scss file.</em></p>
+
+    <hr>
+
     <h3>Foundation Global Settings and Mixins</h3>
     <p>We've included a global settings file that holds variables and mixins that are used throughout the entirety of Foundation. Here's a look at that file:</p>
 
 <%= code_example '
-//
-// Foundation Variables
-//
+/* Foundation Variables */
 
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with browser-based text zoom or user-set defaults.
+The default font-size is set to 100% of the browser style sheet (usually 16px)
+for compatibility with browser-based text zoom or user-set defaults.
 $base-font-size: 100% !default;
 
-// This is the default html and body font-size for the base em value.
+$base-line-height is 24px while $base-font-size is 16px
+$base-line-height: 150%;
+
+This is the default html and body font-size for the base em value.
 
-// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
-// If you want your base font-size to be a different size and not have it effect grid size too,
-// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
+Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+If you want your base font-size to be a different size and not have it effect grid size too,
+set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
 $em-base: 16px !default;
 
-// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
+Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
 @function emCalc($pxWidth) {
   @return $pxWidth / $em-base * 1em;
 }
 
-// We use these to control various global styles
-// $body-bg: #fff;
-// $body-font-color: #222;
-// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-// $body-font-weight: normal;
-// $body-font-style: normal;
-
-// We use this to control font-smoothing
-// $font-smoothing: antialiased;
-
-// We use these to control text direction settings
-// $text-direction: ltr;
-
-// We use these as default colors throughout
-// $primary-color: #2ba6cb;
-// $secondary-color: #e9e9e9;
-// $alert-color: #c60f13;
-// $success-color: #5da423;
-
-// We use these to make sure border radius matches unless we want it different.
-// $global-radius: 3px;
-// $global-rounded: 1000px;
-
-// We use these to control inset shadow shiny edges and depressions.
-// $shiny-edge-size: 0 1px 0;
-// $shiny-edge-color: rgba(#fff, .5);
-// $shiny-edge-active-color: rgba(#000, .2);
-
-// We use this to control whether or not CSS classes come through in the gem files.
-// $include-html-classes: true;
-// $include-print-styles: true;
-// $include-html-grid-classes: $include-html-classes;
-// $include-html-visibility-classes: $include-html-classes;
-// $include-html-button-classes: $include-html-classes;
-// $include-html-form-classes: $include-html-classes;
-// $include-html-custom-form-classes: $include-html-classes;
-// $include-html-media-classes: $include-html-classes;
-// $include-html-section-classes: $include-html-classes;
-// $include-html-reveal-classes: $include-html-classes;
-// $include-html-alert-classes: $include-html-classes;
-// $include-html-nav-classes: $include-html-classes;
-// $include-html-label-classes: $include-html-classes;
-// $include-html-panel-classes: $include-html-classes;
-// $include-html-pricing-classes: $include-html-classes;
-// $include-html-progress-classes: $include-html-classes;
-// $include-html-magellan-classes: $include-html-classes;
-
-// Media Queries
-// $small-screen: emCalc(768px);
-// $medium-screen: emCalc(1280px);
-// $large-screen: emCalc(1440px);
-
-// $screen: "only screen";
-// $small: "only screen and (min-width:"#{$small-screen}")";
-// $medium: "only screen and (min-width:"#{$medium-screen}")";
-// $large: "only screen and (min-width:"#{$large-screen}")";
-// $landscape: "only screen and (orientation: landscape)";
-// $portrait: "only screen and (orientation: portrait)";
-
-//
-// Grid Variables
-//
-
-// $row-width: emCalc(1000px);
-// $column-gutter: emCalc(30px);
-// $total-columns: 12;
-
-//
-// Block Grid Variables
-//
-
-// We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
-// $block-grid-default-spacing: 10px;
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-// $block-grid-media-queries: true;
-
-//
-// Typography Variables
-//
-
-// We use these to control header font styles
-// $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-// $header-font-weight: bold;
-// $header-font-style: normal;
-// $header-font-color: #222;
-// $header-line-height: 1.4;
-// $header-top-margin: .2em;
-// $header-bottom-margin: .5em;
-// $header-text-rendering: optimizeLegibility;
-
-// We use these to control header font sizes
-// $h1-font-size: emCalc(44px);
-// $h2-font-size: emCalc(37px);
-// $h3-font-size: emCalc(27px);
-// $h4-font-size: emCalc(23px);
-// $h5-font-size: emCalc(18px);
-// $h6-font-size: 1em;
-
-// These control how subheaders are styled
-// $subheader-line-height: 1.4;
-// $subheader-font-color: lighten($header-font-color, 30%);
-// $subheader-font-weight: 300;
-// $subheader-top-margin: .2em;
-// $subheader-bottom-margin: .5em;
-
-// A general <small> styling
-// $small-font-size: 60%;
-// $small-font-color: lighten($header-font-color, 30%);
-
-// We use these to style paragraphs
-// $paragraph-font-family: inherit;
-// $paragraph-font-weight: normal;
-// $paragraph-font-size: 1em;
-// $paragraph-line-height: 1.6;
-// $paragraph-margin-bottom: emCalc(20px);
-// $paragraph-aside-font-size: emCalc(14px);
-// $paragraph-aside-line-height: 1.35;
-// $paragraph-aside-font-style: italic;
-
-// We use these to style <code> tags
-// $code-color: darken($alert-color, 15%);
-// $code-font-family: Consolas, "Liberation Mono", Courier, monospace;
-// $code-font-weight: bold;
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-font-color: $primary-color;
-// $anchor-font-color-hover: darken($primary-color, 5%);
-
-// We use these to style the <hr> element
-// $hr-border-width: 1px;
-// $hr-border-style: solid;
-// $hr-border-color: #ddd;
-// $hr-margin: emCalc(20px);
-
-// We use these to style lists
-// $list-style-position: outside;
-// $list-side-margin: emCalc(18px);
-// $definition-list-header-weight: bold;
-// $definition-list-header-margin-bottom: .3em;
-// $definition-list-margin-bottom: emCalc(12px);
-
-// We use these to style blockquotes
-// $blockquote-font-color: lighten($header-font-color, 30%);
-// $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px);
-// $blockquote-border: 1px solid #ddd;
-// $blockquote-cite-font-size: emCalc(13px);
-// $blockquote-cite-font-color: lighten($header-font-color, 20%);
-// $blockquote-cite-link-color: $blockquote-cite-font-color;
-
-// Acronym styles
-// $acronym-underline: 1px dotted #ddd;
-
-// We use these to control padding and margin
-// $microformat-padding: emCalc(10px) emCalc(12px);
-// $microformat-margin: 0 0 emCalc(20px) 0;
-
-// We use these to control border styles
-// $microformat-border-width: 1px;
-// $microformat-border-style: solid;
-// $microformat-border-color: #ddd;
-
-// We use these to control full name font styles
-// $microformat-fullname-font-weight: bold;
-// $microformat-fullname-font-size: emCalc(15px);
-
-// We use this to control the summary font styles
-// $microformat-summary-font-weight: bold;
-
-// We use this to control abbr padding
-// $microformat-abbr-padding: 0 emCalc(1px);
-
-// We use this to control abbr font styles
-// $microformat-abbr-font-weight: bold;
-// $microformat-abbr-font-decoration: none;
-
-//
-// Form Variables
-//
-
-// We use this to set the base for lots of form spacing and positioning styles
-// $form-spacing: emCalc(16px);
-
-// We use these to style the labels in different ways
-// $label-pointer: pointer;
-// $label-font-size: emCalc(14px);
-// $label-font-weight: 500;
-// $label-font-color: lighten(#000, 30%);
-// $label-bottom-margin: emCalc(3px);
-// $input-font-family: inherit;
-// $input-font-color: rgba(0,0,0,0.75);
-// $input-font-size: emCalc(14px);
-// $input-bg-color: #fff;
-// $input-focus-bg-color: darken(#fff, 2%);
-// $input-border-color: darken(#fff, 20%);
-// $input-focus-border-color: darken(#fff, 40%);
-// $input-border-style: solid;
-// $input-border-width: 1px;
-// $input-disabled-bg: #ddd;
-// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-
-// We use these to style the fieldset border and spacing.
-// $fieldset-border-style: solid;
-// $fieldset-border-width: 1px;
-// $fieldset-border-color: #ddd;
-// $fieldset-padding: emCalc(20px);
-// $fieldset-margin: emCalc(18px) 0;
-
-// We use these to style the legends when you use them
-// $legend-bg: #fff;
-// $legend-font-weight: bold;
-// $legend-padding: 0 emCalc(3px);
-
-// We use these to style the prefix and postfix input elements
-// $input-prefix-bg: darken(#fff, 5%);
-// $input-prefix-border-color: darken(#fff, 20%);
-// $input-prefix-border-size: 1px;
-// $input-prefix-border-type: solid;
-// $input-prefix-overflow: hidden;
-// $input-prefix-font-color: #333;
-// $input-prefix-font-color-alt: #fff;
-
-// We use these to style the error states for inputs and labels
-// $input-error-message-padding: emCalc(6px) emCalc(4px);
-// $input-error-message-top: -($form-spacing) - emCalc(5px);
-// $input-error-message-font-size: emCalc(12px);
-// $input-error-message-font-weight: bold;
-// $input-error-message-font-color: #fff;
-// $input-error-message-font-color-alt: #333;
-
-// We use these to build padding for buttons.
-// $button-med: emCalc(12px);
-// $button-tny: emCalc(7px);
-// $button-sml: emCalc(9px);
-// $button-lrg: emCalc(16px);
-
-// We use this to control the display property.
-// $button-display: inline-block;
-// $button-margin-bottom: emCalc(20px);
-
-// We use these to control button text styles.
-// $button-font-family: inherit;
-// $button-font-color: #fff;
-// $button-font-color-alt: #333;
-// $button-font-med: emCalc(16px);
-// $button-font-tny: emCalc(11px);
-// $button-font-sml: emCalc(13px);
-// $button-font-lrg: emCalc(20px);
-// $button-font-weight: bold;
-// $button-font-align: center;
-
-// We use these to control various hover effects.
-// $button-function-factor: 10%;
-
-// We use these to control button border styles.
-// $button-border-width: 1px;
-// $button-border-style: solid;
-// $button-border-color: darken($primary-color, $button-function-factor);
-
-// We use this to set the default radius used throughout the core.
-// $button-radius: $global-radius;
-
-// We use this to set default opacity for disabled buttons.
-// $button-disabled-opacity: 0.6;
-
-//
-// Dropdown Button Variables
-//
-
-// We use these to set the color of the pip in dropdown buttons
-// $dropdown-button-pip-color: #fff;
-// $dropdown-button-pip-color-alt: #333;
-
-// We use these to style tiny dropdown buttons
-// $dropdown-button-padding-tny: $button-tny * 5;
-// $dropdown-button-pip-size-tny: $button-tny;
-// $dropdown-button-pip-right-tny: $button-tny * 2;
-// $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
-
-// We use these to style small dropdown buttons
-// $dropdown-button-padding-sml: $button-sml * 5;
-// $dropdown-button-pip-size-sml: $button-sml;
-// $dropdown-button-pip-right-sml: $button-sml * 2;
-// $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px);
-
-// We use these to style medium dropdown buttons
-// $dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
-// $dropdown-button-pip-size-med: $button-med - emCalc(3px);
-// $dropdown-button-pip-right-med: $button-med * 2;
-// $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
-
-// We use these to style large dropdown buttons
-// $dropdown-button-padding-lrg: $button-lrg * 4;
-// $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
-// $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
-// $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
-
-//
-// Split Button Variables
-//
-
-// We use these to control different shared styles for split buttons
-// $split-button-function-factor: 15%;
-// $split-button-pip-color: #fff;
-// $split-button-pip-color-alt: #333;
-// $split-button-active-bg-tint: rgba(0,0,0,0.1);
-
-// We use these to control tiny split buttons
-// $split-button-padding-tny: $button-tny * 9;
-// $split-button-span-width-tny: $button-tny * 6.5;
-// $split-button-pip-size-tny: $button-tny;
-// $split-button-pip-top-tny: $button-tny * 2;
-// $split-button-pip-left-tny: emCalc(-5px);
-
-// We use these to control small split buttons
-// $split-button-padding-sml: $button-sml * 7;
-// $split-button-span-width-sml: $button-sml * 5;
-// $split-button-pip-size-sml: $button-sml;
-// $split-button-pip-top-sml: $button-sml * 1.5;
-// $split-button-pip-left-sml: emCalc(-9px);
-
-// We use these to control medium split buttons
-// $split-button-padding-med: $button-med * 6.4;
-// $split-button-span-width-med: $button-med * 4;
-// $split-button-pip-size-med: $button-med - emCalc(3px);
-// $split-button-pip-top-med: $button-med * 1.5;
-// $split-button-pip-left-med: emCalc(-9px);
-
-// We use these to control large split buttons
-// $split-button-padding-lrg: $button-lrg * 6;
-// $split-button-span-width-lrg: $button-lrg * 3.75;
-// $split-button-pip-size-lrg: $button-lrg - emCalc(6px);
-// $split-button-pip-top-lrg: $button-lrg + emCalc(5px);
-// $split-button-pip-left-lrg: emCalc(-9px);
-
-//
-// Alert Variables
-//
-
-// We use this to control alert padding
-// $alert-padding-top: emCalc(11px);
-// $alert-padding-left: $alert-padding-top;
-// $alert-padding-right: $alert-padding-top + emCalc(10px);
-// $alert-padding-bottom: $alert-padding-top + emCalc(1px);
-
-// We use these to control text style
-// $alert-font-weight: bold;
-// $alert-font-size: emCalc(14px);
-// $alert-font-color: #fff;
-// $alert-font-color-alt: darken($secondary-color, 60%);
-
-// We use this for close hover effect
-// $alert-function-factor: 10%;
-
-// We use these to control border styles
-// $alert-border-style: solid;
-// $alert-border-width: 1px;
-// $alert-border-color: darken($primary-color, $alert-function-factor);
-// $alert-bottom-margin: emCalc(20px);
-
-// We use these to style the close buttons
-// $alert-close-color: #333;
-// $alert-close-position: emCalc(5px);
-// $alert-close-font-size: emCalc(22px);
-// $alert-close-opacity: 0.3;
-// $alert-close-opacity-hover: 0.5;
-// $alert-close-padding: 5px 4px 4px;
-
-// We use this to control border radius
-// $alert-radius: $global-radius;
-
-//
-// Breadcrumb Variables
-//
-
-// We use this to set the background color for the breadcrumb container
-// $crumb-bg: lighten($secondary-color, 5%);
-
-// We use these to set the padding around the breadcrumbs
-// $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
-// $crumb-side-padding: emCalc(12px);
-
-// We use these to control border styles
-// $crumb-function-factor: 10%;
-// $crumb-border-size: 1px;
-// $crumb-border-style: solid;
-// $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
-// $crumb-radius: $global-radius;
-
-// We use these to set various text styles for breadcrumbs
-// $crumb-font-size: emCalc(11px);
-// $crumb-font-color: $primary-color;
-// $crumb-font-color-current: #333;
-// $crumb-font-color-unavailable: #999;
-// $crumb-font-transform: uppercase;
-// $crumb-link-decor: underline;
-
-// We use these to control the slash between breadcrumbs
-// $crumb-slash-color: #aaa;
-// $crumb-slash: "/";
-
-//
-// Clearing Variables
-//
-
-// We use these to set the background colors for parts of Clearing
-// $clearing-bg: #111;
-// $clearing-caption-bg: $clearing-bg;
-// $clearing-carousel-bg: #111;
-// $clearing-img-bg: $clearing-bg;
-
-// We use these to style the close button
-// $clearing-close-color: #fff;
-// $clearing-close-size: 40px;
-
-// We use these to style the arrows
-// $clearing-arrow-size: 16px;
-// $clearing-arrow-color: $clearing-close-color;
-
-// We use these to style captions
-// $clearing-caption-font-color: #fff;
-// $clearing-caption-padding: 10px 30px;
-
-// We use these to make the image and carousel height and style
-// $clearing-active-img-height: 75%;
-// $clearing-carousel-height: 150px;
-// $clearing-carousel-thumb-width: 175px;
-// $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
-
-//
-// Custom Form Variables
-//
-
-// We use these to control the basic form styles input styles
-// $custom-form-border-color: #ccc;
-// $custom-form-bg: #fff;
-// $custom-form-bg-disabled: #ddd;
-// $custom-form-check-color: #222;
-
-// We use these to style the custom select form element
-// $custom-select-bg: #fff;
-// $custom-select-fade-to-color: #f3f3f3;
-// $custom-select-border-color: #ddd;
-// $custom-select-triangle-color: #aaa;
-// $custom-select-triangle-color-open: #222;
-// $custom-select-height: emCalc(13px) + ($form-spacing * 1.5);
-// $custom-select-margin-bottom: emCalc(20px);
-// $custom-select-font-color-selected: #141414;
-// $custom-select-disabled-color: #888;
-
-// We use these to control the style of the custom select dropdown element
-// $custom-dropdown-height: 200px;
-// $custom-dropdown-bg: #fff;
-// $custom-dropdown-border-color: darken(#fff, 20%);
-// $custom-dropdown-border-width: 1px;
-// $custom-dropdown-border-style: solid;
-// $custom-dropdown-font-color: #555;
-// $custom-dropdown-font-size: emCalc(14px);
-// $custom-dropdown-color-selected: #eeeeee;
-// $custom-dropdown-font-color-selected: #000;
-// $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
-// $custom-dropdown-offset-top: none;
-// $custom-dropdown-list-padding: emCalc(4px);
-// $custom-dropdown-left-padding: emCalc(6px);
-// $custom-dropdown-right-padding: emCalc(38px);
-// $custom-dropdown-list-item-min-height: emCalc(24px);
-
-//
-// Dropdown Variables
-//
-
-// We use these to controls height and width styles
-// $f-dropdown-max-width: 200px;
-// $f-dropdown-height: auto;
-// $f-dropdown-max-height: none;
-// $f-dropdown-margin-top: 2px;
-
-// We use this to control the background color
-// $f-dropdown-bg: #fff;
-
-// We use this to set the border styles for dropdowns
-// $f-dropdown-border-style: solid;
-// $f-dropdown-border-width: 1px;
-// $f-dropdown-border-color: darken(#fff, 20%);
-
-// We use these to style the triangle pip
-// $f-dropdown-triangle-size: 6px;
-// $f-dropdown-triangle-color: #fff;
-// $f-dropdown-triangle-side-offset: 10px;
-
-// We use these to control styles for the list elements
-// $f-dropdown-list-style: none;
-// $f-dropdown-font-color: #555;
-// $f-dropdown-font-size: emCalc(14px);
-// $f-dropdown-list-padding: emCalc(5px) emCalc(10px);
-// $f-dropdown-line-height: emCalc(18px);
-// $f-dropdown-list-hover-bg: #eeeeee;
-// $dropdown-mobile-left: 0;
-
-// We use this to control the styles for when the dropdown has custom content
-// $f-dropdown-content-padding: emCalc(20px);
-
-//
-// Flex Video Variables
-//
-
-// We use these to control video container padding and margins
-// $flex-video-padding-top: emCalc(25px);
-// $flex-video-padding-bottom: 67.5%;
-// $flex-video-margin-bottom: emCalc(16px);
-
-// We use this to control widescreen bottom padding
-// $flex-video-widescreen-padding-bottom: 57.25%;
-
-//
-// Inline List Variables
-//
-
-// We use this to control the margins and padding of the inline list
-// $inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
-// $inline-list-margin: 0 0;
-// $inline-list-padding: 0;
-
-// We use this to control the overflow of the inline list
-// $inline-list-overflow: hidden;
-
-// We use this to control the list items
-// $inline-list-display: block;
-
-// We use this to control any elments within list items
-// $inline-list-children-display: block;
-
-//
-// Joyride Variables
-//
-
-// Controlling default Joyride styles
-// $joyride-tip-bg: rgb(0,0,0);
-// $joyride-tip-default-width: 300px;
-// $joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px);
-// $joyride-tip-border: solid 1px #555;
-// $joyride-tip-radius: 4px;
-// $joyride-tip-position-offset: 22px;
-
-// Here, we are setting the tip dont styles
-// $joyride-tip-font-color: #fff;
-// $joyride-tip-font-size: emCalc(14px);
-// $joyride-tip-header-weight: bold;
-
-// This changes the nub size
-// $joyride-tip-nub-size: 14px;
-
-// This adjusts the styles for the timer when its enabled
-// $joyride-tip-timer-width: 50px;
-// $joyride-tip-timer-height: 3px;
-// $joyride-tip-timer-color: #666;
-
-// This changes up the styles for the close button
-// $joyride-tip-close-color: #777;
-// $joyride-tip-close-size: 30px;
-// $joyride-tip-close-weight: normal;
-
-// When Joyride is filling the screen, we use this style for the bg
-// $joyride-screenfill: rgba(0,0,0,0.5);
-
-//
-// Keystroke Variables
-//
-
-// We use these to control text styles.
-// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-// $keystroke-font-size: emCalc(15px);
-// $keystroke-font-color: #222;
-// $keystroke-font-color-alt: #fff;
-// $keystroke-function-factor: 7%;
-
-// We use this to control keystroke padding
-// $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
-
-// We use these to control background and border styles
-// $keystroke-bg: darken(#fff, $keystroke-function-factor);
-// $keystroke-border-style: solid;
-// $keystroke-border-width: 1px;
-// $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
-// $keystroke-radius: $global-radius;
-
-//
-// Label Variables
-//
-
-// We use these to style the labels
-// $label-padding: emCalc(3px) emCalc(10px) emCalc(4px);
-// $label-radius: $global-radius;
-
-// We use these to style the label text
-// $label-font-sizing: emCalc(14px);
-// $label-font-weight: bold;
-
-//
-// Magellan Variables
-//
-
-// We use these to control basic visual styles
-// $magellan-bg: #fff;
-// $magellan-padding: 10px;
-
-//
-// Orbit Settings
-//
-
-// We use these to control the caption styles
-// $orbit-container-bg: #f5f5f5;
-// $orbit-caption-bg-old-browser: #000;
-// $orbit-caption-bg-old: rgb(0,0,0);
-// $orbit-caption-bg: rgba(0,0,0,0.6);
-// $orbit-caption-font-color: #fff;
-
-// We use these to control the left/right nav styles
-// $orbit-nav-bg-old: rgb(0,0,0);
-// $orbit-nav-bg: rgba(0,0,0,0.6);
-
-// We use these to control the timer styles
-// $orbit-timer-bg-old: rgb(0,0,0);
-// $orbit-timer-bg: rgba(0,0,0,0.6);
-
-// We use these to control the bullet nav styles
-// $orbit-bullet-nav-color: #999;
-// $orbit-bullet-nav-color-active: #222;
-
-// We use thes to controls the style of slide numbers
-// $orbit-slide-number-bg: rgb(0,0,0);
-// $orbit-slide-number-font-color: #fff;
-// $orbit-slide-number-padding: emCalc(5px);
-
-// Margin for when Orbit is stacked on small screens
-// $stack-on-small-margin-bottom: emCalc(20px);
-
-//
-// Pagination Variables
-//
-
-// We use these to control the pagination container
-// $pagination-height: emCalc(24px);
-// $pagination-margin: emCalc(-5px);
-
-// We use these to set the list-item properties
-// $pagination-li-float: $default-float;
-// $pagination-li-height: emCalc(24px);
-// $pagination-li-font-color: #222;
-// $pagination-li-font-size: emCalc(14px);
-// $pagination-li-margin: emCalc(5px);
-
-// We use these for the pagination anchor links
-// $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
-// $pagination-link-font-color: #999;
-// $pagination-link-active-bg: darken(#fff, 10%);
-
-// We use these for disabled anchor links
-// $pagination-link-unavailable-cursor: default;
-// $pagination-link-unavailable-font-color: #999;
-// $pagination-link-unavailable-bg-active: transparent;
-
-// We use these for currently selected anchor links
-// $pagination-link-current-background: $primary-color;
-// $pagination-link-current-font-color: #fff;
-// $pagination-link-current-font-weight: bold;
-// $pagination-link-current-cursor: default;
-// $pagination-link-current-active-bg: $primary-color;
-
-//
-// Panel Variables
-//
-
-// We use these to control the background and border styles
-// $panel-bg: darken(#fff, 5%);
-// $panel-border-style: solid;
-// $panel-border-size: 1px;
-
-// We use this % to control how much we darken things on hover
-// $panel-function-factor: 10%;
-// $panel-border-color: darken($panel-bg, $panel-function-factor);
-
-// We use these to set default inner padding and bottom margin
-// $panel-margin-bottom: emCalc(20px);
-// $panel-padding: emCalc(20px);
-
-// We use these to set default font colors
-// $panel-font-color: #333;
-// $panel-font-color-alt: #fff;
-
-//
-// Pricing Table Variables
-//
-
-// We use this to control the border color
-// $price-table-border: solid 1px #ddd;
-
-// We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: emCalc(20px);
-
-// We use these to control the title styles
-// $price-title-bg: #ddd;
-// $price-title-padding: emCalc(15px) emCalc(20px);
-// $price-title-align: center;
-// $price-title-color: #333;
-// $price-title-weight: bold;
-// $price-title-size: emCalc(16px);
-
-// We use these to control the price styles
-// $price-money-bg: #eee;
-// $price-money-padding: emCalc(15px) emCalc(20px);
-// $price-money-align: center;
-// $price-money-color: #333;
-// $price-money-weight: normal;
-// $price-money-size: emCalc(20px);
-
-// We use these to control the description styles
-// $price-bg: #fff;
-// $price-desc-color: #777;
-// $price-desc-padding: emCalc(15px);
-// $price-desc-align: center;
-// $price-desc-font-size: emCalc(12px);
-// $price-desc-weight: normal;
-// $price-desc-line-height: 1.4;
-// $price-desc-bottom-border: dotted 1px #ddd;
-
-// We use these to control the list item styles
-// $price-item-color: #333;
-// $price-item-padding: emCalc(15px);
-// $price-item-align: center;
-// $price-item-font-size: emCalc(14px);
-// $price-item-weight: normal;
-// $price-item-bottom-border: dotted 1px #ddd;
-
-// We use these to control the CTA area styles
-// $price-cta-bg: #f5f5f5;
-// $price-cta-align: center;
-// $price-cta-padding: emCalc(20px) emCalc(20px) 0;
-
-//
-// Progress Bar Variables
-//
-
-// We use this to se the prog bar height
-// $progress-bar-height: emCalc(25px);
-// $progress-bar-color: transparent;
-
-// We use these to control the border styles
-// $progress-bar-border-color: darken(#fff, 20%);
-// $progress-bar-border-size: 1px;
-// $progress-bar-border-style: solid;
-// $progress-bar-border-radius: $global-radius;
-
-// We use these to control the margin & padding
-// $progress-bar-pad: emCalc(2px);
-// $progress-bar-margin-bottom: emCalc(10px);
-
-// We use these to set the meter colors
-// $progress-meter-color: $primary-color;
-// $progress-meter-secondary-color: $secondary-color;
-// $progress-meter-success-color: $success-color;
-// $progress-meter-alert-color: $alert-color;
-
-//
-// Reveal Variables
-//
-
-// We use these to control the style of the reveal overlay
-// $reveal-overlay-bg: rgba(#000, .45);
-// $reveal-overlay-bg-old: #000;
-
-// We use these to control the style of the modal itself
-// $reveal-modal-bg: #fff;
-// $reveal-position-top: 50px;
-// $reveal-default-width: 80%;
-// $reveal-modal-padding: emCalc(20px);
-// $reveal-box-shadow: 0 0 10px rgba(#000,.4);
-
-// We use these to style the reveal close button
-// $reveal-close-font-size: emCalc(22px);
-// $reveal-close-top: emCalc(8px);
-// $reveal-close-side: emCalc(11px);
-// $reveal-close-color: #aaa;
-// $reveal-close-weight: bold;
-
-// We use these to control the modal border
-// $reveal-border-style: solid;
-// $reveal-border-width: 1px;
-// $reveal-border-color: #666;
-
-//
-// Section Variables
-//
-
-// We use these to set padding and hover factor
-// $section-padding: emCalc(15px);
-// $section-function-factor: 10%;
-
-// These style the titles
-// $section-title-color: #333;
-// $section-title-bg: #efefef;
-// $section-title-bg-active: darken($section-title-bg, $section-function-factor);
-// $section-title-bg-active-tabs: #fff;
-
-// Want to control border size, here ya go!
-// $section-border-size: 1px;
-// $section-border-style: solid;
-// $section-border-color: #ccc;
-
-// Control the color of the background and some size options
-// $section-content-bg: #fff;
-// $section-vertical-nav-min-width: emCalc(200px);
-// $section-bottom-margin: emCalc(20px);
-
-//
-// Side Nav Variables
-//
-
-// We use this to control padding
-// $side-nav-padding: emCalc(14px) 0;
-
-// We use these to control list styles
-// $side-nav-list-type: none;
-// $side-nav-list-position: inside;
-// $side-nav-list-margin: 0 0 emCalc(7px) 0;
-
-// We use these to control link styles
-// $side-nav-link-color: $primary-color;
-// $side-nav-link-color-active: lighten(#000, 30%);
-// $side-nav-font-size: emCalc(14px);
-// $side-nav-font-weight: bold;
-
-// We use these to control border styles
-// $side-nav-divider-size: 1px;
-// $side-nav-divider-style: solid;
-// $side-nav-divider-color: darken(#fff, 10%);
-
-//
-// Sub Nav Variables
-//
-
-// We use these to control margin and padding
-// $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px);
-// $sub-nav-list-padding-top: emCalc(4px);
-
-// We use this to control the definition
-// $sub-nav-font-size: emCalc(14px);
-// $sub-nav-font-color: #999;
-// $sub-nav-font-weight: normal;
-// $sub-nav-text-decoration: none;
-// $sub-nav-border-radius: 1000px;
-
-// We use these to control the active item styles
-// $sub-nav-active-font-weight: bold;
-// $sub-nav-active-bg: $primary-color;
-// $sub-nav-active-color: #fff;
-// $sub-nav-active-padding: emCalc(3px) emCalc(9px);
-// $sub-nav-active-cursor: default;
-
-//
-// Switch Variables
-//
-
-// Controlling border styles and background colors for the switch container
-// $switch-border-color: darken(#fff, 20%);
-// $switch-border-style: solid;
-// $switch-border-width: 1px;
-// $switch-bg: #fff;
-
-// We use these to control the switch heights for our default classes
-// $switch-height-tny: 22px;
-// $switch-height-sml: 28px;
-// $switch-height-med: 36px;
-// $switch-height-lrg: 44px;
-// $switch-bottom-margin: emCalc(20px);
-
-// We use these to control default font sizes for our classes
-// $switch-font-size-tny: 11px;
-// $switch-font-size-sml: 12px;
-// $switch-font-size-med: 14px;
-// $switch-font-size-lrg: 17px;
-// $switch-label-side-padding: 6px;
-
-// We use these to style the switch-paddle
-// $switch-paddle-bg: #fff;
-// $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
-// $switch-paddle-border-color: darken($switch-paddle-bg, 35%);
-// $switch-paddle-border-width: 1px;
-// $switch-paddle-border-style: solid;
-// $switch-paddle-transition-speed: .1s;
-// $switch-paddle-transition-ease: ease-out;
-// $switch-positive-color: lighten($success-color, 50%);
-// $switch-negative-color: #f5f5f5;
-
-// Outline Style for tabbing through switches
-// $switch-label-outline: 1px dotted #888;
-
-//
-// Table Variables
-//
-
-// These control the background color for the table and even rows
-// $table-bg: #fff;
-// $table-even-row-bg: #f9f9f9;
-
-// These control the table cell border style
-// $table-border-style: solid;
-// $table-border-size: 1px;
-// $table-border-color: #ddd;
-
-// These control the table head styles
-// $table-head-bg: #f5f5f5;
-// $table-head-font-size: emCalc(14px);
-// $table-head-font-color: #222;
-// $table-head-font-weight: bold;
-// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
-
-// These control the row padding and font styles
-// $table-row-padding: emCalc(9px) emCalc(10px);
-// $table-row-font-size: emCalc(14px);
-// $table-row-font-color: #222;
-// $table-line-height: emCalc(18px);
-
-// These are for controlling the display and margin of tables
-// $table-display: table-cell;
-// $table-margin-bottom: emCalc(20px);
-
-//
-// Image Thumbnail Variables
-//
-
-// We use these to control border styles
-// $thumb-border-style: solid;
-// $thumb-border-width: 4px;
-// $thumb-border-color: #fff;
-// $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
-// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
-
-// Radius and transition speed for thumbs
-// $thumb-radius: $global-radius;
-// $thumb-transition-speed: 200ms;
-
-//
-// Tooltip Variables
-//
-// $has-tip-border-bottom: dotted 1px #ccc;
-// $has-tip-font-weight: bold;
-// $has-tip-font-color: #333;
-// $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
-// $has-tip-font-color-hover: $primary-color;
-// $has-tip-cursor-type: help;
-
-// $tooltip-padding: emCalc(8px);
-// $tooltip-bg: #000;
-// $tooltip-font-size: emCalc(15px);
-// $tooltip-font-weight: bold;
-// $tooltip-font-color: #fff;
-// $tooltip-line-height: 1.3;
-// $tooltip-close-font-size: emCalc(10px);
-// $tooltip-close-font-weight: normal;
-// $tooltip-close-font-color: #888;
-// $tooltip-font-size-sml: emCalc(14px);
-// $tooltip-radius: $global-radius;
-// $tooltip-pip-size: 5px;
-
-//
-// Top Bar Variables
-//
-
-// Background color for the top bar
-// $topbar-bg: #111;
-
-// Height and margin
-// $topbar-height: 45px;
-// $topbar-margin-bottom: emCalc(30px);
-
-// Control Input height for top bar
-// $topbar-input-height: 2.45em;
-
-// Controlling the styles for the title in the top bar
-// $topbar-title-weight: bold;
-// $topbar-title-font-size: emCalc(17px);
-
-// Set the link colors and styles for top-level nav
-// $topbar-link-color: #fff;
-// $topbar-link-weight: bold;
-// $topbar-link-font-size: emCalc(13px);
-// $topbar-link-hover-lightness: -30% !default; // Darken by 30%
-
-// Style the top bar dropdown elements
-// $topbar-dropdown-bg: #333;
-// $topbar-dropdown-link-color: #fff;
-// $topbar-dropdown-toggle-size: 5px;
-// $topbar-dropdown-toggle-color: #fff;
-// $topbar-dropdown-toggle-alpha: 0.5;
-// $dropdown-label-color: #555;
-
-// Top menu icon styles
-// $topbar-menu-link-transform: uppercase;
-// $topbar-menu-link-font-size: emCalc(13px);
-// $topbar-menu-link-weight: bold;
-// $topbar-menu-link-color: #fff;
-// $topbar-menu-icon-color: #fff;
-// $topbar-menu-link-color-toggled: #888;
-// $topbar-menu-icon-color-toggled: #888;
-
-// Transitions and breakpoint styles
-// $topbar-transition-speed: 300ms;
-// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
-// $topbar-media-query: "only screen and (min-width: "#{$topbar-breakpoint}")";
+Change whether or not you include browser prefixes
+$experimental: true !default;
+
+Various global styles
+
+$default-float: left;
+
+$body-bg: #fff;
+$body-font-color: #222;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$body-font-weight: normal;
+$body-font-style: normal;
+
+Font-smoothing
+
+$font-smoothing: antialiased;
+
+Text direction settings
+
+$text-direction: ltr;
+
+Colors
+
+$primary-color: #2ba6cb;
+$secondary-color: #e9e9e9;
+$alert-color: #c60f13;
+$success-color: #5da423;
+
+Make sure border radius matches unless we want it different.
+
+$global-radius: 3px;
+$global-rounded: 1000px;
+
+Inset shadow shiny edges and depressions.
+
+$shiny-edge-size: 0 1px 0;
+$shiny-edge-color: rgba(#fff, .5);
+$shiny-edge-active-color: rgba(#000, .2);
+
+Control whether or not CSS classes come through in the CSS files.
+
+$include-html-classes: true;
+$include-print-styles: true;
+$include-html-global-classes: $include-html-classes;
+$include-html-type-classes: $include-html-classes;
+$include-html-grid-classes: $include-html-classes;
+$include-html-visibility-classes: $include-html-classes;
+$include-html-button-classes: $include-html-classes;
+$include-html-form-classes: $include-html-classes;
+$include-html-custom-form-classes: $include-html-classes;
+$include-html-media-classes: $include-html-classes;
+$include-html-section-classes: $include-html-classes;
+$include-html-orbit-classes: $include-html-classes;
+$include-html-reveal-classes: $include-html-classes;
+$include-html-joyride-classes: $include-html-classes;
+$include-html-clearing-classes: $include-html-classes;
+$include-html-alert-classes: $include-html-classes;
+$include-html-nav-classes: $include-html-classes;
+$include-html-top-bar-classes: $include-html-classes;
+$include-html-label-classes: $include-html-classes;
+$include-html-panel-classes: $include-html-classes;
+$include-html-pricing-classes: $include-html-classes;
+$include-html-progress-classes: $include-html-classes;
+$include-html-magellan-classes: $include-html-classes;
+$include-html-tooltip-classes: $include-html-classes;
+
+Media Queries
+
+$small-screen: 768px;
+$medium-screen: 1280px;
+$large-screen: 1440px;
+
+$screen: "only screen";
+$small: "only screen and (min-width: #{$small-screen})";
+$medium: "only screen and (min-width: #{$medium-screen})";
+$large: "only screen and (min-width: #{$large-screen})";
+$landscape: "only screen and (orientation: landscape)";
+$portrait: "only screen and (orientation: portrait)";
+
+Cursors
+
+Custom use example -> $cursor-default-value: url(http://cursors-site.net/path/to/custom/cursor/default.cur),progress;
+
+$cursor-crosshair-value: "crosshair";
+$cursor-default-value: "default";
+$cursor-pointer-value: "pointer";
+$cursor-help-value: "help";
+
+
+Grid Variables
+
+
+$row-width: emCalc(1000px);
+$column-gutter: emCalc(30px);
+$total-columns: 12;
+
+
+Block Grid Variables
+
+
+Maximum number of block grid elements per row
+
+$block-grid-elements: 12;
+$block-grid-default-spacing: emCalc(20px);
+
+Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+
+$block-grid-media-queries: true;
+
+
+Typography Variables
+
+
+Heading font styles
+
+$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$header-font-weight: bold;
+$header-font-style: normal;
+$header-font-color: #222;
+$header-line-height: 1.4;
+$header-top-margin: .2em;
+$header-bottom-margin: .5em;
+$header-text-rendering: optimizeLegibility;
+
+Heading font sizes
+
+$h1-font-size: emCalc(44px);
+$h2-font-size: emCalc(37px);
+$h3-font-size: emCalc(27px);
+$h4-font-size: emCalc(23px);
+$h5-font-size: emCalc(18px);
+$h6-font-size: 1em;
+
+Subheaders
+
+$subheader-line-height: 1.4;
+$subheader-font-color: lighten($header-font-color, 30%);
+$subheader-font-weight: 300;
+$subheader-top-margin: .2em;
+$subheader-bottom-margin: .5em;
+
+<small> styling
+
+$small-font-size: 60%;
+$small-font-color: lighten($header-font-color, 30%);
+
+Paragraphs
+
+$paragraph-font-family: inherit;
+$paragraph-font-weight: normal;
+$paragraph-font-size: 1em;
+$paragraph-line-height: 1.6;
+$paragraph-margin-bottom: emCalc(20px);
+$paragraph-aside-font-size: emCalc(14px);
+$paragraph-aside-line-height: 1.35;
+$paragraph-aside-font-style: italic;
+
+<code> tags
+
+$code-color: darken($alert-color, 15%);
+$code-font-family: Consolas, "Liberation Mono", Courier, monospace;
+$code-font-weight: bold;
+
+Anchors
+
+$anchor-text-decoration: none;
+$anchor-font-color: $primary-color;
+$anchor-font-color-hover: darken($primary-color, 5%);
+
+<hr> element
+
+$hr-border-width: 1px;
+$hr-border-style: solid;
+$hr-border-color: #ddd;
+$hr-margin: emCalc(20px);
+
+Lists
+
+$list-style-position: outside;
+$list-side-margin: emCalc(20px);
+$list-nested-margin: emCalc(20px);
+$definition-list-header-weight: bold;
+$definition-list-header-margin-bottom: .3em;
+$definition-list-margin-bottom: emCalc(12px);
+
+Blockquotes
+
+$blockquote-font-color: lighten($header-font-color, 30%);
+$blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px);
+$blockquote-border: 1px solid #ddd;
+$blockquote-cite-font-size: emCalc(13px);
+$blockquote-cite-font-color: lighten($header-font-color, 20%);
+$blockquote-cite-link-color: $blockquote-cite-font-color;
+
+Acronym
+
+$acronym-underline: 1px dotted #ddd;
+
+Padding and margin
+
+$microformat-padding: emCalc(10px) emCalc(12px);
+$microformat-margin: 0 0 emCalc(20px) 0;
+
+Border styles
+
+$microformat-border-width: 1px;
+$microformat-border-style: solid;
+$microformat-border-color: #ddd;
+
+Full name font styles
+
+$microformat-fullname-font-weight: bold;
+$microformat-fullname-font-size: emCalc(15px);
+
+Summary font styles
+
+$microformat-summary-font-weight: bold;
+
+<abbr> padding
+
+$microformat-abbr-padding: 0 emCalc(1px);
+
+<abbr> font styles
+
+$microformat-abbr-font-weight: bold;
+$microformat-abbr-font-decoration: none;
+
+
+Form Variables
+
+
+Base for lots of form spacing and positioning styles
+
+$form-spacing: emCalc(16px);
+
+Labels
+
+$form-label-pointer: pointer;
+$form-label-font-size: emCalc(14px);
+$form-label-font-weight: 500;
+$form-label-font-color: lighten(#000, 30%);
+$form-label-bottom-margin: emCalc(3px);
+$input-font-family: inherit;
+$input-font-color: rgba(0,0,0,0.75);
+$input-font-size: emCalc(14px);
+$input-bg-color: #fff;
+$input-focus-bg-color: darken(#fff, 2%);
+$input-border-color: darken(#fff, 20%);
+$input-focus-border-color: darken(#fff, 40%);
+$input-border-style: solid;
+$input-border-width: 1px;
+$input-disabled-bg: #ddd;
+$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+$input-include-glowing-effect: true;
+
+Fieldset border and spacing.
+
+$fieldset-border-style: solid;
+$fieldset-border-width: 1px;
+$fieldset-border-color: #ddd;
+$fieldset-padding: emCalc(20px);
+$fieldset-margin: emCalc(18px) 0;
+
+Legends
+
+$legend-bg: #fff;
+$legend-font-weight: bold;
+$legend-padding: 0 emCalc(3px);
+
+Prefix and postfix input elements
+
+$input-prefix-bg: darken(#fff, 5%);
+$input-prefix-border-color: darken(#fff, 20%);
+$input-prefix-border-size: 1px;
+$input-prefix-border-type: solid;
+$input-prefix-overflow: hidden;
+$input-prefix-font-color: #333;
+$input-prefix-font-color-alt: #fff;
+
+Error states for inputs and labels
+
+$input-error-message-padding: emCalc(6px) emCalc(4px);
+$input-error-message-top: -($form-spacing) - emCalc(5px);
+$input-error-message-font-size: emCalc(12px);
+$input-error-message-font-weight: bold;
+$input-error-message-font-color: #fff;
+$input-error-message-font-color-alt: #333;
+
+Glowing effect of inputs when focused
+
+$glowing-effect-fade-time: 0.45s;
+$glowing-effect-color: $input-focus-border-color;
+
+
+Button Variables
+
+
+Padding for buttons.
+
+$button-tny: emCalc(7px);
+$button-sml: emCalc(9px);
+$button-med: emCalc(12px);
+$button-lrg: emCalc(16px);
+
+Display property.
+
+$button-display: inline-block;
+$button-margin-bottom: emCalc(20px);
+
+Button text styles.
+
+$button-font-family: inherit;
+$button-font-color: #fff;
+$button-font-color-alt: #333;
+$button-font-med: emCalc(16px);
+$button-font-tny: emCalc(11px);
+$button-font-sml: emCalc(13px);
+$button-font-lrg: emCalc(20px);
+$button-font-weight: bold;
+$button-font-align: center;
+
+Various hover effects.
+
+$button-function-factor: 10%;
+
+Button border styles.
+
+$button-border-width: 1px;
+$button-border-style: solid;
+$button-border-color: darken($primary-color, $button-function-factor);
+
+Radius used throughout the core.
+
+$button-radius: $global-radius;
+
+Opacity for disabled buttons.
+
+$button-disabled-opacity: 0.6;
+
+
+Button Groups
+
+
+Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+
+$button-bar-margin-opposite: emCalc(10px);
+
+
+Dropdown Button Variables
+
+
+Color of the pip in dropdown buttons
+
+$dropdown-button-pip-color: #fff;
+$dropdown-button-pip-color-alt: #333;
+
+Tiny dropdown buttons
+
+$dropdown-button-padding-tny: $button-tny * 5;
+$dropdown-button-pip-size-tny: $button-tny;
+$dropdown-button-pip-right-tny: $button-tny * 2;
+$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
+
+Small dropdown buttons
+
+$dropdown-button-padding-sml: $button-sml * 5;
+$dropdown-button-pip-size-sml: $button-sml;
+$dropdown-button-pip-right-sml: $button-sml * 2;
+$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px);
+
+Medium dropdown buttons
+
+$dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
+$dropdown-button-pip-size-med: $button-med - emCalc(3px);
+$dropdown-button-pip-right-med: $button-med * 2;
+$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
+
+Large dropdown buttons
+
+$dropdown-button-padding-lrg: $button-lrg * 4;
+$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
+$dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
+
+
+Split Button Variables
+
+
+Shared styles for Split Buttons
+
+$split-button-function-factor: 15%;
+$split-button-pip-color: #fff;
+$split-button-pip-color-alt: #333;
+$split-button-active-bg-tint: rgba(0,0,0,0.1);
+
+Tiny split buttons
+
+$split-button-padding-tny: $button-tny * 9;
+$split-button-span-width-tny: $button-tny * 6.5;
+$split-button-pip-size-tny: $button-tny;
+$split-button-pip-top-tny: $button-tny * 2;
+$split-button-pip-left-tny: emCalc(-5px);
+
+Small split buttons
+
+$split-button-padding-sml: $button-sml * 7;
+$split-button-span-width-sml: $button-sml * 5;
+$split-button-pip-size-sml: $button-sml;
+$split-button-pip-top-sml: $button-sml * 1.5;
+$split-button-pip-left-sml: emCalc(-9px);
+
+Medium split buttons
+
+$split-button-padding-med: $button-med * 6.4;
+$split-button-span-width-med: $button-med * 4;
+$split-button-pip-size-med: $button-med - emCalc(3px);
+$split-button-pip-top-med: $button-med * 1.5;
+$split-button-pip-left-med: emCalc(-9px);
+
+Large split buttons
+
+$split-button-padding-lrg: $button-lrg * 6;
+$split-button-span-width-lrg: $button-lrg * 3.75;
+$split-button-pip-size-lrg: $button-lrg - emCalc(6px);
+$split-button-pip-top-lrg: $button-lrg + emCalc(5px);
+$split-button-pip-left-lrg: emCalc(-9px);
+
+
+Alert Variables
+
+
+Alert padding
+
+$alert-padding-top:                emCalc(11px);
+$alert-padding-default-float:      $alert-padding-top;
+$alert-padding-opposite-direction: $alert-padding-top + emCalc(10px);
+$alert-padding-bottom:             $alert-padding-top + emCalc(1px);
+
+Text style
+
+$alert-font-weight:                bold;
+$alert-font-size:                  emCalc(14px);
+$alert-font-color:                 #fff;
+$alert-font-color-alt:             darken($secondary-color, 60%);
+
+Hover effect
+
+$alert-function-factor:            10%;
+
+Border Styles
+
+$alert-border-style:               solid;
+$alert-border-width:               1px;
+$alert-border-color:               darken($primary-color, $alert-function-factor);
+$alert-bottom-margin:              emCalc(20px);
+
+Close Button style
+
+$alert-close-color:                #333;
+$alert-close-position:             emCalc(5px);
+$alert-close-font-size:            emCalc(22px);
+$alert-close-opacity:              0.3;
+$alert-close-opacity-hover:        0.5;
+$alert-close-padding:              5px 4px 4px;
+
+Border radius
+
+$alert-radius:                     $global-radius;
+
+
+
+Breadcrumb Variables
+
+
+Background color for the breadcrumb container.
+
+$crumb-bg: lighten($secondary-color, 5%);
+
+Padding around the breadcrumbs.
+
+$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
+$crumb-side-padding: emCalc(12px);
+
+Border styles.
+
+$crumb-function-factor: 10%;
+$crumb-border-size: 1px;
+$crumb-border-style: solid;
+$crumb-border-color: darken($crumb-bg, $crumb-function-factor);
+$crumb-radius: $global-radius;
+
+Various text styles for breadcrumbs.
+
+$crumb-font-size: emCalc(11px);
+$crumb-font-color: $primary-color;
+$crumb-font-color-current: #333;
+$crumb-font-color-unavailable: #999;
+$crumb-font-transform: uppercase;
+$crumb-link-decor: underline;
+
+Slash between breadcrumbs
+
+$crumb-slash-color: #aaa;
+$crumb-slash: "/";
+
+
+Clearing Variables
+
+
+Background colors for parts of Clearing.
+
+$clearing-bg: #111;
+$clearing-caption-bg: $clearing-bg;
+$clearing-carousel-bg: #111;
+$clearing-img-bg: $clearing-bg;
+
+Close button
+
+$clearing-close-color: #fff;
+$clearing-close-size: 40px;
+
+Style the arrows
+
+$clearing-arrow-size: 16px;
+$clearing-arrow-color: $clearing-close-color;
+
+Style captions
+
+$clearing-caption-font-color: #fff;
+$clearing-caption-padding: 10px 30px;
+
+Make the image and carousel height and style
+
+$clearing-active-img-height: 75%;
+$clearing-carousel-height: 150px;
+$clearing-carousel-thumb-width: 175px;
+$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
+
+
+Custom Form Variables
+
+
+Basic form styles input styles
+
+$custom-form-border-color: #ccc;
+$custom-form-border-size: 1px;
+$custom-form-bg: #fff;
+$custom-form-bg-disabled: #ddd;
+$custom-form-input-size: 16px;
+$custom-form-check-color: #222;
+$custom-form-check-size: 14px;
+$custom-form-radio-size: 8px;
+$custom-form-checkbox-radius: 0px;
+
+Custom select form element.
+
+$custom-select-bg: #fff;
+$custom-select-fade-to-color: #f3f3f3;
+$custom-select-border-color: #ddd;
+$custom-select-triangle-color: #aaa;
+$custom-select-triangle-color-open: #222;
+$custom-select-height: emCalc(13px) + ($form-spacing * 1.5);
+$custom-select-margin-bottom: emCalc(20px);
+$custom-select-font-color-selected: #141414;
+$custom-select-disabled-color: #888;
+
+Custom select dropdown element.
+
+$custom-dropdown-height: 200px;
+$custom-dropdown-bg: #fff;
+$custom-dropdown-border-color: darken(#fff, 20%);
+$custom-dropdown-border-width: 1px;
+$custom-dropdown-border-style: solid;
+$custom-dropdown-font-color: #555;
+$custom-dropdown-font-size: emCalc(14px);
+$custom-dropdown-color-selected: #eeeeee;
+$custom-dropdown-font-color-selected: #000;
+$custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
+$custom-dropdown-offset-top: none;
+$custom-dropdown-list-padding: emCalc(4px);
+$custom-dropdown-left-padding: emCalc(6px);
+$custom-dropdown-right-padding: emCalc(38px);
+$custom-dropdown-list-item-min-height: emCalc(24px);
+
+
+Dropdown Variables
+
+
+Height and width styles.
+
+$f-dropdown-max-width: 200px;
+$f-dropdown-height: auto;
+$f-dropdown-max-height: none;
+$f-dropdown-margin-top: 2px;
+
+Background color
+
+$f-dropdown-bg: #fff;
+
+Border styles for dropdowns.
+
+$f-dropdown-border-style: solid;
+$f-dropdown-border-width: 1px;
+$f-dropdown-border-color: darken(#fff, 20%);
+
+Triangle pip.
+
+$f-dropdown-triangle-size: 6px;
+$f-dropdown-triangle-color: #fff;
+$f-dropdown-triangle-side-offset: 10px;
+
+List elements.
+
+$f-dropdown-list-style: none;
+$f-dropdown-font-color: #555;
+$f-dropdown-font-size: emCalc(14px);
+$f-dropdown-list-padding: emCalc(5px) emCalc(10px);
+$f-dropdown-line-height: emCalc(18px);
+$f-dropdown-list-hover-bg: #eeeeee;
+$dropdown-mobile-left: 0;
+
+When the dropdown has custom content.
+
+$f-dropdown-content-padding: emCalc(20px);
+
+
+Flex Video Variables
+
+
+Video container padding and margins
+
+$flex-video-padding-top: emCalc(25px);
+$flex-video-padding-bottom: 67.5%;
+$flex-video-margin-bottom: emCalc(16px);
+
+Widescreen bottom padding
+
+$flex-video-widescreen-padding-bottom: 57.25%;
+
+
+Inline List Variables
+
+
+Margins and padding of the inline list.
+
+$inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
+$inline-list-margin: 0 0;
+$inline-list-padding: 0;
+
+Overflow of the inline list.
+
+$inline-list-overflow: hidden;
+
+List items
+
+$inline-list-display: block;
+
+Elments within list items
+
+$inline-list-children-display: block;
+
+
+Joyride Variables
+
+
+Joyride styles
+
+$joyride-tip-bg: rgb(0,0,0);
+$joyride-tip-default-width: 300px;
+$joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px);
+$joyride-tip-border: solid 1px #555;
+$joyride-tip-radius: 4px;
+$joyride-tip-position-offset: 22px;
+
+Tip font styles
+
+$joyride-tip-font-color: #fff;
+$joyride-tip-font-size: emCalc(14px);
+$joyride-tip-header-weight: bold;
+
+Changes the nub size
+
+$joyride-tip-nub-size: 14px;
+
+Adjusts the styles for the timer when its enabled
+
+$joyride-tip-timer-width: 50px;
+$joyride-tip-timer-height: 3px;
+$joyride-tip-timer-color: #666;
+
+Changes up the styles for the close button
+
+$joyride-tip-close-color: #777;
+$joyride-tip-close-size: 30px;
+$joyride-tip-close-weight: normal;
+
+When Joyride is filling the screen, style for the bg
+
+$joyride-screenfill: rgba(0,0,0,0.5);
+
+
+Keystroke Variables
+
+
+Text styles.
+
+$keystroke-font: "Consolas", "Menlo", "Courier", monospace;
+$keystroke-font-size: emCalc(15px);
+$keystroke-font-color: #222;
+$keystroke-font-color-alt: #fff;
+$keystroke-function-factor: 7%;
+
+Keystroke padding.
+
+$keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
+
+Background and border styles.
+
+$keystroke-bg: darken(#fff, $keystroke-function-factor);
+$keystroke-border-style: solid;
+$keystroke-border-width: 1px;
+$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
+$keystroke-radius: $global-radius;
+
+
+Label Variables
+
+
+Style the labels
+
+$label-padding: emCalc(3px) emCalc(10px) emCalc(4px);
+$label-radius: $global-radius;
+
+We use these to style the label text
+
+$label-font-sizing: emCalc(14px);
+$label-font-weight: bold;
+$label-font-color: #333;
+$label-font-color-alt: #fff;
+
+
+Magellan Variables
+
+
+Basic visual styles
+
+$magellan-bg: #fff;
+$magellan-padding: 10px;
+
+
+Orbit Settings
+
+
+Caption styles
+
+$orbit-container-bg: #f5f5f5;
+$orbit-caption-bg-old: rgb(0,0,0);
+$orbit-caption-bg: rgba(0,0,0,0.6);
+$orbit-caption-font-color: #fff;
+
+Left/right nav styles
+
+$orbit-nav-bg-old: rgb(0,0,0);
+$orbit-nav-bg: rgba(0,0,0,0.6);
+
+Timer styles
+
+$orbit-timer-bg-old: rgb(0,0,0);
+$orbit-timer-bg: rgba(0,0,0,0.6);
+
+Bullet nav styles
+
+$orbit-bullet-nav-color: #999;
+$orbit-bullet-nav-color-active: #222;
+
+Slide numbers
+
+$orbit-slide-number-bg: rgba(0,0,0,0);
+$orbit-slide-number-font-color: #fff;
+$orbit-slide-number-padding: emCalc(5px);
+
+Graceful Loading Wrapper and preloader
+
+$wrapper-class: "slideshow-wrapper";
+$preloader-class: "preloader" ;
+
+
+Pagination Variables
+
+
+Pagination container
+
+$pagination-height: emCalc(24px);
+$pagination-margin: emCalc(-5px);
+
+List-item properties
+
+$pagination-li-float: $default-float;
+$pagination-li-height: emCalc(24px);
+$pagination-li-font-color: #222;
+$pagination-li-font-size: emCalc(14px);
+$pagination-li-margin: emCalc(5px);
+
+Pagination anchor links
+
+$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
+$pagination-link-font-color: #999;
+$pagination-link-active-bg: darken(#fff, 10%);
+
+Disabled anchor links
+
+$pagination-link-unavailable-cursor: $cursor-default-value;
+$pagination-link-unavailable-font-color: #999;
+$pagination-link-unavailable-bg-active: transparent;
+
+Currently selected anchor links
+
+$pagination-link-current-background: $primary-color;
+$pagination-link-current-font-color: #fff;
+$pagination-link-current-font-weight: bold;
+$pagination-link-current-cursor: $cursor-default-value;
+$pagination-link-current-active-bg: $primary-color;
+
+
+Panel Variables
+
+
+Background and border styles
+
+$panel-bg: darken(#fff, 5%);
+$panel-border-style: solid;
+$panel-border-size: 1px;
+
+Control how much we darken things on hover
+
+$panel-function-factor: 10%;
+$panel-border-color: darken($panel-bg, $panel-function-factor);
+
+Inner padding and bottom margin
+
+$panel-margin-bottom: emCalc(20px);
+$panel-padding: emCalc(20px);
+
+Font colors
+
+$panel-font-color: #333;
+$panel-font-color-alt: #fff;
+
+
+Pricing Table Variables
+
+
+Border color
+
+$price-table-border: solid 1px #ddd;
+
+Bottom margin of the pricing table
+
+$price-table-margin-bottom: emCalc(20px);
+
+Control the title styles
+
+$price-title-bg: #ddd;
+$price-title-padding: emCalc(15px) emCalc(20px);
+$price-title-align: center;
+$price-title-color: #333;
+$price-title-weight: bold;
+$price-title-size: emCalc(16px);
+
+Control the price styles
+
+$price-money-bg: #eee;
+$price-money-padding: emCalc(15px) emCalc(20px);
+$price-money-align: center;
+$price-money-color: #333;
+$price-money-weight: normal;
+$price-money-size: emCalc(20px);
+
+Description styles
+
+$price-bg: #fff;
+$price-desc-color: #777;
+$price-desc-padding: emCalc(15px);
+$price-desc-align: center;
+$price-desc-font-size: emCalc(12px);
+$price-desc-weight: normal;
+$price-desc-line-height: 1.4;
+$price-desc-bottom-border: dotted 1px #ddd;
+
+List item styles
+
+$price-item-color: #333;
+$price-item-padding: emCalc(15px);
+$price-item-align: center;
+$price-item-font-size: emCalc(14px);
+$price-item-weight: normal;
+$price-item-bottom-border: dotted 1px #ddd;
+
+CTA area styles
+
+$price-cta-bg: #f5f5f5;
+$price-cta-align: center;
+$price-cta-padding: emCalc(20px) emCalc(20px) 0;
+
+
+Progress Bar Variables
+
+
+Progress bar height
+
+$progress-bar-height: emCalc(25px);
+$progress-bar-color: transparent;
+
+Border styles
+
+$progress-bar-border-color: darken(#fff, 20%);
+$progress-bar-border-size: 1px;
+$progress-bar-border-style: solid;
+$progress-bar-border-radius: $global-radius;
+
+Margin & padding
+
+$progress-bar-pad: emCalc(2px);
+$progress-bar-margin-bottom: emCalc(10px);
+
+Meter colors
+
+$progress-meter-color: $primary-color;
+$progress-meter-secondary-color: $secondary-color;
+$progress-meter-success-color: $success-color;
+$progress-meter-alert-color: $alert-color;
+
+
+Reveal Variables
+
+
+Reveal overlay.
+
+$reveal-overlay-bg: rgba(#000, .45);
+$reveal-overlay-bg-old: #000;
+
+Modal itself.
+
+$reveal-modal-bg: #fff;
+$reveal-position-top: 50px;
+$reveal-default-width: 80%;
+$reveal-modal-padding: emCalc(20px);
+$reveal-box-shadow: 0 0 10px rgba(#000,.4);
+
+Reveal close button
+
+$reveal-close-font-size: emCalc(22px);
+$reveal-close-top: emCalc(8px);
+$reveal-close-side: emCalc(11px);
+$reveal-close-color: #aaa;
+$reveal-close-weight: bold;
+
+Modal border
+
+$reveal-border-style: solid;
+$reveal-border-width: 1px;
+$reveal-border-color: #666;
+
+$reveal-modal-class: "reveal-modal";
+$close-reveal-modal-class: "close-reveal-modal";
+
+
+Section Variables
+
+
+Padding and hover factor
+
+$section-title-padding: emCalc(15px);
+$section-content-padding: emCalc(15px);
+$section-function-factor: 10%;
+
+Titles
+
+$section-title-color: #333;
+$section-title-bg: #efefef;
+$section-title-bg-active: darken($section-title-bg, $section-function-factor);
+$section-title-bg-active-tabs: #fff;
+$section-title-bg-hover: darken($section-title-bg, $section-function-factor/2);
+
+Border size
+
+$section-border-size: 1px;
+$section-border-style: solid;
+$section-border-color: #ccc;
+
+Font controls
+
+$section-font-size: emCalc(14px);
+
+Control the color of the background and some size options
+
+$section-content-bg: #fff;
+$section-vertical-nav-min-width: emCalc(200px);
+$section-vertical-tabs-title-width: emCalc(200px);
+$section-bottom-margin: emCalc(20px);
+
+$title-selector: ".title";
+$content-selector: ".content";
+
+
+Side Nav Variables
+
+
+Padding
+
+$side-nav-padding: emCalc(14px) 0;
+
+List styles
+
+$side-nav-list-type: none;
+$side-nav-list-position: inside;
+$side-nav-list-margin: 0 0 emCalc(7px) 0;
+
+Link styles
+
+$side-nav-link-color: $primary-color;
+$side-nav-link-color-active: lighten(#000, 30%);
+$side-nav-font-size: emCalc(14px);
+$side-nav-font-weight: bold;
+
+Border styles
+
+$side-nav-divider-size: 1px;
+$side-nav-divider-style: solid;
+$side-nav-divider-color: darken(#fff, 10%);
+
+
+Sub Nav Variables
+
+
+Margin and padding
+
+$sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px);
+$sub-nav-list-padding-top: emCalc(4px);
+
+Definition
+
+$sub-nav-font-size: emCalc(14px);
+$sub-nav-font-color: #999;
+$sub-nav-font-weight: normal;
+$sub-nav-text-decoration: none;
+$sub-nav-border-radius: 1000px;
+
+Active item styles
+
+$sub-nav-active-font-weight: bold;
+$sub-nav-active-bg: $primary-color;
+$sub-nav-active-color: #fff;
+$sub-nav-active-padding: emCalc(3px) emCalc(9px);
+$sub-nav-active-cursor: $cursor-default-value;
+
+
+Switch Variables
+
+
+Border styles and background colors for the switch container
+
+$switch-border-color: darken(#fff, 20%);
+$switch-border-style: solid;
+$switch-border-width: 1px;
+$switch-bg: #fff;
+
+Switch heights for our default classes
+
+$switch-height-tny: 22px;
+$switch-height-sml: 28px;
+$switch-height-med: 36px;
+$switch-height-lrg: 44px;
+$switch-bottom-margin: emCalc(20px);
+
+Font sizes for our classes.
+
+$switch-font-size-tny: 11px;
+$switch-font-size-sml: 12px;
+$switch-font-size-med: 14px;
+$switch-font-size-lrg: 17px;
+$switch-label-side-padding: 6px;
+
+Switch-paddle
+
+$switch-paddle-bg: #fff;
+$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
+$switch-paddle-border-color: darken($switch-paddle-bg, 35%);
+$switch-paddle-border-width: 1px;
+$switch-paddle-border-style: solid;
+$switch-paddle-transition-speed: .1s;
+$switch-paddle-transition-ease: ease-out;
+$switch-positive-color: lighten($success-color, 50%);
+$switch-negative-color: #f5f5f5;
+
+Outline Style for tabbing through switches
+
+$switch-label-outline: 1px dotted #888;
+
+
+Table Variables
+
+
+Background color for the table and even rows
+
+$table-bg: #fff;
+$table-even-row-bg: #f9f9f9;
+
+Table cell border style
+
+$table-border-style: solid;
+$table-border-size: 1px;
+$table-border-color: #ddd;
+
+Table head styles
+
+$table-head-bg: #f5f5f5;
+$table-head-font-size: emCalc(14px);
+$table-head-font-color: #222;
+$table-head-font-weight: bold;
+$table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
+
+Row padding and font styles
+
+$table-row-padding: emCalc(9px) emCalc(10px);
+$table-row-font-size: emCalc(14px);
+$table-row-font-color: #222;
+$table-line-height: emCalc(18px);
+
+Display and margin of tables
+
+$table-display: table-cell;
+$table-margin-bottom: emCalc(20px);
+
+
+Image Thumbnail Variables
+
+
+Border styles
+
+$thumb-border-style: solid;
+$thumb-border-width: 4px;
+$thumb-border-color: #fff;
+$thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
+
+Radius and transition speed for thumbs
+
+$thumb-radius: $global-radius;
+$thumb-transition-speed: 200ms;
+
+
+Tooltip Variables
+
+
+$has-tip-border-bottom: dotted 1px #ccc;
+$has-tip-font-weight: bold;
+$has-tip-font-color: #333;
+$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
+$has-tip-font-color-hover: $primary-color;
+$has-tip-cursor-type: help;
+
+$tooltip-padding: emCalc(8px);
+$tooltip-bg: #000;
+$tooltip-font-size: emCalc(15px);
+$tooltip-font-weight: bold;
+$tooltip-font-color: #fff;
+$tooltip-line-height: 1.3;
+$tooltip-close-font-size: emCalc(10px);
+$tooltip-close-font-weight: normal;
+$tooltip-close-font-color: #888;
+$tooltip-font-size-sml: emCalc(14px);
+$tooltip-radius: $global-radius;
+$tooltip-pip-size: 5px;
+
+
+Top Bar Variables
+
+
+Background color for the top bar
+
+$topbar-bg:                            #111 !default;
+
+Height and margin
+
+$topbar-height:                        45px;
+$topbar-margin-bottom:                 emCalc(30px);
+
+Control Input height for top bar
+
+$topbar-input-height:                  2.45em;
+
+Controlling the styles for the title in the top bar
+
+$topbar-title-weight:                  bold;
+$topbar-title-font-size:               emCalc(17px);
+
+Style the top bar dropdown elements
+
+$topbar-dropdown-bg:                   #222;
+$topbar-dropdown-link-color:           #fff;
+$topbar-dropdown-link-bg:              lighten($topbar-bg, 5%);
+$topbar-dropdown-toggle-size:          5px;
+$topbar-dropdown-toggle-color:         #fff;
+$topbar-dropdown-toggle-alpha:         0.5;
+
+Set the link colors and styles for top-level nav
+
+$topbar-link-color:                    #fff;
+$topbar-link-color-hover:              #fff;
+$topbar-link-color-active:             #fff;
+$topbar-link-weight:                   bold;
+$topbar-link-font-size:                emCalc(13px);
+$topbar-link-hover-lightness:          -30%; Darken by 30%
+$topbar-link-bg-hover:                 darken($topbar-bg, 3%);
+$topbar-link-bg-active:                darken($topbar-bg, 3%);
+
+$topbar-dropdown-label-color:          #555;
+$topbar-dropdown-label-text-transform: uppercase;
+$topbar-dropdown-label-font-weight:    bold;
+$topbar-dropdown-label-font-size:      emCalc(10px);
+
+Top menu icon styles
+
+$topbar-menu-link-transform:           uppercase;
+$topbar-menu-link-font-size:           emCalc(13px);
+$topbar-menu-link-weight:              bold;
+$topbar-menu-link-color:               #fff;
+$topbar-menu-icon-color:               #fff;
+$topbar-menu-link-color-toggled:       #888;
+$topbar-menu-icon-color-toggled:       #888;
+
+Transitions and breakpoint styles
+
+$topbar-transition-speed:              300ms;
+$topbar-breakpoint:                    emCalc(940px);
+$topbar-media-query:                   "only screen and (min-width: #{$topbar-breakpoint})";
+
+Divider Styles
+
+$topbar-divider-border-bottom:         solid 1px lighten($topbar-bg, 10%);
+$topbar-divider-border-top:            solid 1px darken($topbar-bg, 10%);
+
+Sticky Class
+
+$topbar-sticky-class:                  ".sticky";
 ', :css %>