zurb-foundation 4.3.1 → 4.3.2

data/docs/css/_footer.scss

@@ -229,7 +229,7 @@
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
   .zurb-footer-top .property {
-    padding-top: 0px;
+    padding-top: 0;
   }
   .zurb-footer-top .property .learn-links, .zurb-footer-top .property .support-links, .zurb-footer-top .property .connect-links {
     height: 240px;
@@ -238,10 +238,10 @@
 }
 @media only screen and (max-width: 767px) {
   .zurb-footer-top .property .property-info {
-    padding-top: 0px;
+    padding-top: 0;
   }
-  
-  
+
+
   .zurb-footer-top .property .learn-links, .zurb-footer-top .property .support-links, .zurb-footer-top .property .connect-links {
     border: none;
     height: auto;
@@ -312,7 +312,7 @@
   .zurb-footer-bottom p.copyright {
     margin-bottom: 20px !important;
   }
-  
+
   .zurb-footer-top .property h3 a {
     font-size: 23px !important;
   }
@@ -329,7 +329,7 @@
     clear: both;
   }
   .zurb-footer-top .global .footer-link-block span {
-    padding-left: 0px;
+    padding-left: 0;
   }
   .zurb-footer-top .global .footer-link-block.services {
     border-top: 0;
@@ -368,7 +368,7 @@
     clear: both;
   }
   .zurb-footer-top .global .footer-link-block span {
-    padding-left: 0px;
+    padding-left: 0;
   }
   .zurb-footer-top .global .footer-link-block.services {
     border-top: 0;

data/docs/css/_offcanvas.scss

@@ -7,20 +7,20 @@ canvas { background: #23B9D2; }
 #sidebar .paneled .container { overflow: hidden; }
 
 /* ==============================
-     ---- Main Nav Styles ---- 
+     ---- Main Nav Styles ----
 =================================*/
 
 a.sidebar-button { margin-left: 15px; display: inline-block;}
 a.sidebar-button img { margin-top: -6px; width: 23px; }
 a.sidebar-button h4 { font-size: 22px !important; display: inline !important; margin-left: 10px; line-height: 1; color: #fff; font-weight: bold !important; }
-#sidebar { position: absolute; background: #333; height: 100%; padding: 0px; -webkit-box-shadow: inset -2px 0px 8px -1px #111111; box-shadow: inset -2px 0px 8px -1px #111111; padding-top: 10px; }
+#sidebar { position: absolute; background: #333; height: 100%; padding: 0; -webkit-box-shadow: inset -2px 0 8px -1px #111111; box-shadow: inset -2px 0 8px -1px #111111; padding-top: 10px; }
 #sidebar h5 a { font-size: 20px !important; }
 #sidebar hr { margin: 8px 0 20px 0; border-color: #444444 !important;}
-#sidebar h6,#sidebar h5  { color:#727272; text-transform: uppercase; margin-bottom: 0px; font-family:'Proxima Nova Condensed', 'proxima-nova-condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
+#sidebar h6,#sidebar h5  { color:#727272; text-transform: uppercase; margin-bottom: 0; font-family:'Proxima Nova Condensed', 'proxima-nova-condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
 #sidebar h6 { font-size: 14px; font-weight: bold;}
-#sidebar .nav-bar { background: none; margin-bottom: 0px;}
+#sidebar .nav-bar { background: none; margin-bottom: 0;}
 #sidebar .nav-bar li { width: 100%; box-shadow: none !important; }
-#sidebar .nav-bar li a { font-size: 20px !important; font-weight: 500; color: #ccc; font-family: 'Proxima Nova','ProximaNova', 'proxima-nova'; font-weight: 600; padding: 0px !important;}
+#sidebar .nav-bar li a { font-size: 20px !important; font-weight: 500; color: #ccc; font-family: 'Proxima Nova','ProximaNova', 'proxima-nova'; font-weight: 600; padding: 0 !important;}
 .nav-bar { height:110px; background: #4d4d4d; margin-left: 0; margin-top: 8px !important;  }
 .nav-bar.goodness { height:120px; background: #4d4d4d; margin-left: 0; margin-top: 20px; padding: 0; }
 .nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid #333333; border-right: none; line-height: 38px; }
@@ -29,11 +29,11 @@ a.sidebar-button h4 { font-size: 22px !important; display: inline !important; ma
 .nav-bar > li ul { margin-bottom: 0; }
 .nav-bar > li .flyout { display: none; }
 #sidebar .main-menu { overflow-x: hidden; }
-#sidebar .main-menu, #sidebar .more-goodness, #sidebar .zurb-links { padding: 0px 15px; }
+#sidebar .main-menu, #sidebar .more-goodness, #sidebar .zurb-links { padding: 0 15px; }
 
 
 /* ==============================
-   ZURB Passport Section 
+   ZURB Passport Section
 ============================== */
 
 #sidebar #passport { display: inline-block; width: 100%; border-bottom: #444444 1px solid; margin-bottom: 10px; }
@@ -44,16 +44,16 @@ a.sidebar-button h4 { font-size: 22px !important; display: inline !important; ma
 #sidebar #passport .avatar { height: 70px; float: right; width: 70px; }
 
 /* ==============================
-     ---- ZURB Pillars ---- 
+     ---- ZURB Pillars ----
 =================================*/
 
 #sidebar .zurb-links { padding-bottom: 25px; margin-top: -5px; }
-#sidebar .zurb-links ul.top li { display: inline-block; margin-left: 0px; line-height: 1;font-family:'Proxima Nova Condensed', 'proxima-nova-condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
-#sidebar .zurb-links ul.top li.logo { margin-left: 0px;  }
-#sidebar .zurb-links ul.top li.logo a { padding: 3px 8px 3px 0px; font-size: 0.9em;}
+#sidebar .zurb-links ul.top li { display: inline-block; margin-left: 0; line-height: 1;font-family:'Proxima Nova Condensed', 'proxima-nova-condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
+#sidebar .zurb-links ul.top li.logo { margin-left: 0;  }
+#sidebar .zurb-links ul.top li.logo a { padding: 3px 8px 3px 0; font-size: 0.9em;}
 #sidebar .zurb-links ul.top li.logo img { width:60px; margin-top: -4px; }
 #sidebar .zurb-links ul.top li a { color: #727272; text-transform: uppercase; font-size: 13px; padding: 5px; font-weight: 600;}
-#sidebar .zurb-links ul.pillars { list-style: none; } 
+#sidebar .zurb-links ul.pillars { list-style: none; }
 #sidebar .zurb-links .footer-link-block span.title {  padding-bottom:0px;padding-left: 40px; font-family: "ProximaNova" , "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 1.3em; margin-bottom: 8px; color: #cccccc;}
 #sidebar .zurb-links .footer-link-block span { display: block; color: #ccc; font-size: 1.0em;line-height: 18px; margin-bottom: 18px; line-height: 20px; margin-bottom: 24px;  color: #727272; padding-left: 0; font-size: 0.9em; }
 #sidebar .zurb-links .footer-link-block { font-weight: normal; background: url("offcanvas/footer-icons.png") no-repeat 0 0; display: block; margin-bottom: 14px; padding-top: 6px; }
@@ -103,15 +103,15 @@ a.sidebar-button h4 { font-size: 22px !important; display: inline !important; ma
   .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
   .hide-extras .main { width: 100%; }
   .hide-extras .complementary { display: none; }
-  .navigation#topMenu { display: none; } 
+  .navigation#topMenu { display: none; }
   .active .main { margin-right: 0%; }
 }
 
 
 /* ------------------------------------------------------------
-  Disables Overflow on mobile - Had issues with Foundation 4 
+  Disables Overflow on mobile - Had issues with Foundation 4
 ------------------------------------------------------------ */
-@media all and (max-width: 767px) { 
+@media all and (max-width: 767px) {
   html { overflow-x: hidden; }
   body.off-canvas { padding: 0; margin: 0; overflow-x: hidden; }
 }
@@ -137,4 +137,4 @@ a.sidebar-button h4 { font-size: 22px !important; display: inline !important; ma
          url("fonts/ProximaNova-Reg-webfont.svg#webfontZam02nTh") format('svg');
     font-weight: normal;
     font-style: normal;
-}
+}

data/docs/css/docs.scss

@@ -4,8 +4,6 @@
 @import "footer";
 @import "offcanvas";
 
-ol, li {list-style:none;}
-
 #changelog {
   ol, li {list-style: disc; margin-left: 30px;}
 }
@@ -23,7 +21,7 @@ ol, li {list-style:none;}
 }
 
 .highlight pre {
-  margin: 0px;
+  margin: 0;
   font-size: .7em;
   line-height: 1.4em;
   white-space: pre-wrap;

data/docs/index.html.erb

@@ -32,19 +32,19 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/grid.html">The Grid</a></h5></dt>
+          <dt><a href="components/grid.html">The Grid</a></dt>
           <dd>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/type.html">Typography</a></h5></dt>
+          <dt><a href="components/type.html">Typography</a></dt>
           <dd>Our type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/buttons.html">Buttons</a></h5></dt>
+          <dt><a href="components/buttons.html">Buttons</a></dt>
           <dd>Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.</dd>
         </dl>
       </div>
@@ -53,19 +53,19 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/top-bar.html">Navigation</a></h5></dt>
+          <dt><a href="components/top-bar.html">Navigation</a></dt>
           <dd>People have to get around. Navigation styles in Foundation include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/forms.html">Forms</a></h5></dt>
+          <dt><a href="components/forms.html">Forms</a></dt>
           <dd>Built with the Foundation Grid, you can create simple or complicated forms quickly and easily&mdash; validation states, custom select, radio buttons and more.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/panels.html">UI Elements</a></h5></dt>
+          <dt><a href="components/panels.html">UI Elements</a></dt>
           <dd>We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more.</dd>
         </dl>
       </div>
@@ -74,19 +74,19 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/section.html">Section</a></h5></dt>
+          <dt><a href="components/section.html">Section</a></dt>
           <dd>Whether it's entire pages or simple tabbed content, Foundation's tabs get the job done. Not only stylish, but interactive out of the box.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/orbit.html">Orbit</a></h5></dt>
+          <dt><a href="components/orbit.html">Orbit</a></dt>
           <dd>A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/reveal.html">Reveal</a></h5></dt>
+          <dt><a href="components/reveal.html">Reveal</a></dt>
           <dd>You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.</dd>
         </dl>
       </div>
@@ -95,19 +95,19 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/clearing.html">Clearing</a></h5></dt>
+          <dt><a href="components/clearing.html">Clearing</a></dt>
           <dd>Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/magellan.html">Magellan</a></h5></dt>
+          <dt><a href="components/magellan.html">Magellan</a></dt>
           <dd>A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/joyride.html">Joyride</a></h5></dt>
+          <dt><a href="components/joyride.html">Joyride</a></dt>
           <dd>This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our Scss variables.</dd>
         </dl>
       </div>
@@ -116,20 +116,20 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/tooltips.html">Tooltips</a></h5></dt>
+          <dt><a href="components/tooltips.html">Tooltips</a></dt>
           <dd>Tooltips lets you add quick hover or tap tooltips to elements.</dd>
         </dl>
       </div>
       <div class="large-4 columns end">
         <dl>
-          <dt><h5><a href="components/dropdown.html">Dropdown</a></h5></dt>
+          <dt><a href="components/dropdown.html">Dropdown</a></dt>
           <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/interchange.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>
+          <dt><a href="components/interchange.html">Interchange</a></dt>
+          <dd>This plugin lets you load up the appropriate size image based on media queries that you define.</dd>
         </dl>
       </div>
     </div>
@@ -137,7 +137,7 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5><a href="components/abide.html">Abide</a></h5></dt>
+          <dt><a href="components/abide.html">Abide</a></dt>
           <dd>Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.</dd>
         </dl>
       </div>
@@ -151,19 +151,19 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5>css</h5></dt>
+          <dt>css</dt>
           <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">
         <dl>
-          <dt><h5>js</h5></dt>
+          <dt>js</dt>
           <dd>All of our plugins and the necessary JavaScript to make Foundation work properly. <strong>All JS is initiated by default</strong>.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5>img</h5></dt>
+          <dt>img</dt>
           <dd>This directory actually comes empty in Foundation 4! We no longer have any images included in the core of Foundation.</dd>
         </dl>
       </div>
@@ -172,19 +172,19 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5>index.html</h5></dt>
+          <dt>index.html</dt>
           <dd>A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5>humans.txt</h5></dt>
+          <dt>humans.txt</dt>
           <dd>A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5>robots.txt</h5></dt>
+          <dt>robots.txt</dt>
           <dd>Give instructions to web robots so search engines know what to do when they crawl your site for content.</dd>
         </dl>
       </div>
@@ -197,7 +197,7 @@
           <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). 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>
+            <dt>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>
         </div>
@@ -264,7 +264,7 @@
     <div class="row">
       <div class="large-4 columns">
         <dl>
-          <dt><h5>Doctype &amp; Head</h5></dt>
+          <dt>Doctype &amp; Head</dt>
           <dd>We use the HTML doctype declaration to tell the browser what to expect. From there we've used a <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">technique by Paul Irish</a> that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.</dd>
           <dt>Meta Viewport tag</dt>
           <dd>This is used to make sure smaller devices use the device width as the viewport width.</dd>
@@ -274,7 +274,7 @@
       </div>
       <div class="large-4 columns">
         <dl>
-          <dt><h5>CSS &amp; Modernizr</h5></dt>
+          <dt>CSS &amp; Modernizr</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> 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>
@@ -284,7 +284,7 @@
         <dl>
           <dt>Modernizr</dt>
           <dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.</dd>
-          <dt><h5>Javascripts</h5></dt>
+          <dt>Javascripts</dt>
           <dd>Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.</dd>
         </dl>
       </div>
@@ -295,8 +295,8 @@
     <div class="panel">
       <h3>Get going!</h3>
       <h5 class="subheader">Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.</h5>
-      <a href="./sass.html" class="button">Using the Gem</a></li>
-      <a href="http://foundation.zurb.com/migration.php" class="button secondary">Quickstart with CSS</a></li>
+      <a href="./sass.html" class="button">Using the Gem</a>
+      <a href="http://foundation.zurb.com/migration.php" class="button secondary">Quickstart with CSS</a>
     </div>
 
 

data/docs/layout.html.erb

@@ -53,7 +53,7 @@
      
       
       <header class="show-for-small">
-        <a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="<%= asset_path %>/offcanvas/menu-wht.png"><h4>Foundation</h4></a>
+        <a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="<%= asset_path %>/offcanvas/menu-wht.png" alt="ZURB Menu"><h4>Foundation</h4></a>
       </header>
   
       <% @page_title = "4 Documentation" %>
@@ -159,7 +159,7 @@
     </section>
     
     
-    <section id="sidebar" role="complementary">
+    <aside id="sidebar" role="complementary">
       
       <!-- For Future Use		
       <div id="passport">
@@ -206,7 +206,7 @@
       <div class="more-goodness">		
     		<h6>More ZURB Goodness</h6>
     		<nav role="navigation">
-    		  <ul id="sideMainNav" class="nav-bar goodness">
+    		  <ul id="secondarySideMainNav" class="nav-bar goodness">
             <li><a href="http://zurb.com/expo/foundation-intro">Foundation Training</a></li>
             <li><a href="http://zurb.com/services/our-work">Our Work</a></li>
             <li><a href="http://zurb.com/apps">ZURB Apps</a></li>
@@ -219,7 +219,7 @@
       <!-- These links will be the same across all of our proprties & apps -->
       <div class="zurb-links">		
     		<ul class="top">
-      		<li class="logo"><a href="http://zurb.com"><img src="<%= asset_path %>/offcanvas/zurb-logo.png"></a></li>
+      		<li class="logo"><a href="http://zurb.com"><img src="<%= asset_path %>/offcanvas/zurb-logo.png" alt="ZURB"></a></li>
       		<li><a href="http://zurb.com/about">About</a></li>
       		<li><a href="http://zurb.com/blog">Blog</a></li>
       		<li><a href="http://zurb.com/contact">Contact</a></li>
@@ -252,7 +252,7 @@
     		</ul>
       </div>
     	
-    </section>
+    </aside>
 
   <!-- Reveal Modals begin -->
   <div id="firstModal" class="reveal-modal">

data/docs/media-queries.html.erb

@@ -42,9 +42,9 @@
 
 <%= code_example '
 /* Available Variables */
-$small-screen: emCalc(768);
-$medium-screen: emCalc(1280);
-$large-screen: emCalc(1440);
+$small-screen: em-calc(768);
+$medium-screen: em-calc(1280);
+$large-screen: em-calc(1440);
 
 $screen: "only screen";
 $small: "only screen and (min-width:"#{$small-screen}")";

data/docs/rails.html.erb

@@ -46,7 +46,8 @@ end
       <p>If you're planning on using <a href="http://sass-lang.com/" rel="nofollow">Sass</a> then you'll want to rename <code>application.css</code> to <code>application.scss</code>. That file should then look like:</p>
 
 <%= code_example '
-@import "foundation";
+@import "foundation_and_overrides";
+/* Add imports of custom sass/scss files here */
 ', :css %>
 
       <h5 class="subheader">Add Foundation to your JS</h5>

data/docs/sass.html.erb

@@ -133,6 +133,7 @@
     <h5>Adding Foundation to existing Compass projects</h5>
     <p>If you've created a project using Compass, but didn't require the Foundation gem, you'll need to install it separately. When you do this you'll get all the necessary files on top of the ones you already have. If something is a duplicate, Compass will ignore it. The steps you'll take to properly install Foundation are:</p>
     <ol style="margin-left: 20px;">
+      <li>run <span class="keystroke">gem install zurb-foundation</span></li>
       <li>Add <span class="keystroke">require "zurb-foundation"</span> to your config.rb file</li>
       <li><span class="keystroke">cd path/to/your-project</span></li>
       <li>run <span class="keystroke">compass install foundation</span></li>
@@ -247,11 +248,51 @@ $base-line-height: 150%;
 /* 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(#) */
-@function emCalc($pxWidth) {
-  @return $pxWidth / $em-base * 1em;
+/* It strips the unit of measure and returns it */
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
 }
 
+/* New Syntax, allows to optionally calculate on a different base value to counter compounding effect of em\'s. */
+/* Call with 1, 2, 3 or 4 parameters, \'px\' is not required but supported */
+/* em-calc(10 20 30px 40); */
+/* Space delimited, if you want to delimit using comma\'s, wrap it in another pair of brackets */
+/* em-calc((10, 20, 30, 40px)); */
+/* Optionally call with a different base (eg: 8px) to calculate em. */
+/* em-calc(16px 32px 48px, 8px); */
+/* If you require to comma separate your list */
+/* em-calc((16px, 32px, 48), 8px); */
+
+@function convert-to-em($value, $base-value: $em-base)  {
+  $value: strip-unit($value) / strip-unit($base-value) * 1em;
+  @if ($value == 0em) { $value: 0; } /* Turn 0em into 0 */
+  @return $value;
+}
+
+@function em-calc($values, $base-value: $em-base) {
+  $max: length($values);
+
+  @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }
+
+  $emValues: ();
+  @for $i from 1 through $max {
+    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
+  }
+  @return $emValues;
+}
+
+/* Support for the old syntax */
+
+@function emCalc($values){
+  @return em-calc($values);
+}
+
+/* Maybe you want to create rems with pixels */
+/* $rem-base: 0.625 !default; /*Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;} */
+/* @function remCalc($pxWidth) { */
+/*   @return $pxWidth / $rem-base * 1rem; */
+/* }
+
 /* Change whether or not you include browser prefixes */
 $experimental: true !default;
 
@@ -344,8 +385,8 @@ $cursor-help-value: "help";
 /* Grid Variables */
 
 
-$row-width: emCalc(1000);
-$column-gutter: emCalc(30);
+$row-width: em-calc(1000);
+$column-gutter: em-calc(30);
 $total-columns: 12;
 
 
@@ -355,7 +396,7 @@ $total-columns: 12;
 /* Maximum number of block grid elements per row */
 
 $block-grid-elements: 12;
-$block-grid-default-spacing: emCalc(20);
+$block-grid-default-spacing: em-calc(20);
 
 /* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
 
@@ -378,11 +419,11 @@ $header-text-rendering: optimizeLegibility;
 
 /* Heading font sizes */
 
-$h1-font-size: emCalc(44);
-$h2-font-size: emCalc(37);
-$h3-font-size: emCalc(27);
-$h4-font-size: emCalc(23);
-$h5-font-size: emCalc(18);
+$h1-font-size: em-calc(44);
+$h2-font-size: em-calc(37);
+$h3-font-size: em-calc(27);
+$h4-font-size: em-calc(23);
+$h5-font-size: em-calc(18);
 $h6-font-size: 1em;
 
 /* Subheaders */
@@ -404,8 +445,8 @@ $paragraph-font-family: inherit;
 $paragraph-font-weight: normal;
 $paragraph-font-size: 1em;
 $paragraph-line-height: 1.6;
-$paragraph-margin-bottom: emCalc(20);
-$paragraph-aside-font-size: emCalc(14);
+$paragraph-margin-bottom: em-calc(20);
+$paragraph-aside-font-size: em-calc(14);
 $paragraph-aside-line-height: 1.35;
 $paragraph-aside-font-style: italic;
 
@@ -426,23 +467,23 @@ $anchor-font-color-hover: darken($primary-color, 5%);
 $hr-border-width: 1px;
 $hr-border-style: solid;
 $hr-border-color: #ddd;
-$hr-margin: emCalc(20);
+$hr-margin: em-calc(20);
 
 /* Lists */
 
 $list-style-position: outside;
-$list-side-margin: emCalc(20);
-$list-nested-margin: emCalc(20);
+$list-side-margin: 0;
+$list-nested-margin: em-calc(20);
 $definition-list-header-weight: bold;
 $definition-list-header-margin-bottom: .3em;
-$definition-list-margin-bottom: emCalc(12);
+$definition-list-margin-bottom: em-calc(12);
 
 /* Blockquotes */
 
 $blockquote-font-color: lighten($header-font-color, 30%);
-$blockquote-padding: emCalc(9, 20, 0, 19);
+$blockquote-padding: em-calc(9, 20, 0, 19);
 $blockquote-border: 1px solid #ddd;
-$blockquote-cite-font-size: emCalc(13);
+$blockquote-cite-font-size: em-calc(13);
 $blockquote-cite-font-color: lighten($header-font-color, 20%);
 $blockquote-cite-link-color: $blockquote-cite-font-color;
 
@@ -452,8 +493,8 @@ $acronym-underline: 1px dotted #ddd;
 
 /* Padding and margin */
 
-$microformat-padding: emCalc(10, 12);
-$microformat-margin: emCalc(0, 0, 20, 0);
+$microformat-padding: em-calc(10, 12);
+$microformat-margin: em-calc(0, 0, 20, 0);
 
 /* Border styles */
 
@@ -464,7 +505,7 @@ $microformat-border-color: #ddd;
 /* Full name font styles */
 
 $microformat-fullname-font-weight: bold;
-$microformat-fullname-font-size: emCalc(15);
+$microformat-fullname-font-size: em-calc(15);
 
 /* Summary font styles */
 
@@ -472,7 +513,7 @@ $microformat-summary-font-weight: bold;
 
 /* <abbr> padding */
 
-$microformat-abbr-padding: emCalc(0, 1);
+$microformat-abbr-padding: em-calc(0, 1);
 
 /* <abbr> font styles */
 
@@ -485,18 +526,18 @@ $microformat-abbr-font-decoration: none;
 
 /* Base for lots of form spacing and positioning styles */
 
-$form-spacing: emCalc(16);
+$form-spacing: em-calc(16);
 
 /* Labels */
 
 $form-label-pointer: pointer;
-$form-label-font-size: emCalc(14);
+$form-label-font-size: em-calc(14);
 $form-label-font-weight: 500;
 $form-label-font-color: lighten(#000, 30%);
-$form-label-bottom-margin: emCalc(3);
+$form-label-bottom-margin: em-calc(3);
 $input-font-family: inherit;
 $input-font-color: rgba(0,0,0,0.75);
-$input-font-size: emCalc(14);
+$input-font-size: em-calc(14);
 $input-bg-color: #fff;
 $input-focus-bg-color: darken(#fff, 2%);
 $input-border-color: darken(#fff, 20%);
@@ -512,14 +553,14 @@ $input-include-glowing-effect: true;
 $fieldset-border-style: solid;
 $fieldset-border-width: 1px;
 $fieldset-border-color: #ddd;
-$fieldset-padding: emCalc(20);
-$fieldset-margin: emCalc(18, 0);
+$fieldset-padding: em-calc(20);
+$fieldset-margin: em-calc(18, 0);
 
 /* Legends */
 
 $legend-bg: #fff;
 $legend-font-weight: bold;
-$legend-padding: emCalc(0, 3);
+$legend-padding: em-calc(0, 3);
 
 /* Prefix and postfix input elements */
 
@@ -533,9 +574,9 @@ $input-prefix-font-color-alt: #fff;
 
 /* Error states for inputs and labels */
 
-$input-error-message-padding: emCalc(6, 4);
-$input-error-message-top: -($form-spacing) - emCalc(5);
-$input-error-message-font-size: emCalc(12);
+$input-error-message-padding: em-calc(6, 4);
+$input-error-message-top: -($form-spacing) - em-calc(5);
+$input-error-message-font-size: em-calc(12);
 $input-error-message-font-weight: bold;
 $input-error-message-font-color: #fff;
 $input-error-message-font-color-alt: #333;
@@ -551,25 +592,25 @@ $glowing-effect-color: $input-focus-border-color;
 
 /* Padding for buttons. */
 
-$button-tny: emCalc(7);
-$button-sml: emCalc(9);
-$button-med: emCalc(12);
-$button-lrg: emCalc(16);
+$button-tny: em-calc(7);
+$button-sml: em-calc(9);
+$button-med: em-calc(12);
+$button-lrg: em-calc(16);
 
 /* Display property. */
 
 $button-display: inline-block;
-$button-margin-bottom: emCalc(20);
+$button-margin-bottom: em-calc(20);
 
 /* Button text styles. */
 
 $button-font-family: inherit;
 $button-font-color: #fff;
 $button-font-color-alt: #333;
-$button-font-med: emCalc(16);
-$button-font-tny: emCalc(11);
-$button-font-sml: emCalc(13);
-$button-font-lrg: emCalc(20);
+$button-font-med: em-calc(16);
+$button-font-tny: em-calc(11);
+$button-font-sml: em-calc(13);
+$button-font-lrg: em-calc(20);
 $button-font-weight: bold;
 $button-font-align: center;
 
@@ -597,7 +638,7 @@ $button-disabled-opacity: 0.6;
 
 /* 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(10);
+$button-bar-margin-opposite: em-calc(10);
 
 
 /* Dropdown Button Variables */
@@ -613,28 +654,28 @@ $dropdown-button-pip-color-alt: #333;
 $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(1);
+$dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(1);
 
 /* 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(1);
+$dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1);
 
 /* Medium dropdown buttons */
 
-$dropdown-button-padding-med: $button-med * 4 + emCalc(3);
-$dropdown-button-pip-size-med: $button-med - emCalc(3);
+$dropdown-button-padding-med: $button-med * 4 + em-calc(3);
+$dropdown-button-pip-size-med: $button-med - em-calc(3);
 $dropdown-button-pip-right-med: $button-med * 2;
-$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2);
+$dropdown-button-pip-top-med: -$button-med / 2 + em-calc(2);
 
 /* Large dropdown buttons */
 
 $dropdown-button-padding-lrg: $button-lrg * 4;
-$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6);
-$dropdown-button-pip-right-lrg: $button-lrg + emCalc(12);
-$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3);
+$dropdown-button-pip-size-lrg: $button-lrg - em-calc(6);
+$dropdown-button-pip-right-lrg: $button-lrg + em-calc(12);
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3);
 
 
 /* Split Button Variables */
@@ -653,7 +694,7 @@ $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(-5);
+$split-button-pip-left-tny: em-calc(-5);
 
 /* Small split buttons */
 
@@ -661,23 +702,23 @@ $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(-9);
+$split-button-pip-left-sml: em-calc(-9);
 
 /* 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(3);
+$split-button-pip-size-med: $button-med - em-calc(3);
 $split-button-pip-top-med: $button-med * 1.5;
-$split-button-pip-left-med: emCalc(-9);
+$split-button-pip-left-med: em-calc(-9);
 
 /* 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(6);
-$split-button-pip-top-lrg: $button-lrg + emCalc(5);
-$split-button-pip-left-lrg: emCalc(-9);
+$split-button-pip-size-lrg: $button-lrg - em-calc(6);
+$split-button-pip-top-lrg: $button-lrg + em-calc(5);
+$split-button-pip-left-lrg: em-calc(-9);
 
 
 /* Alert Variables */
@@ -685,15 +726,15 @@ $split-button-pip-left-lrg: emCalc(-9);
 
 /* Alert padding */
 
-$alert-padding-top: emCalc(11);
+$alert-padding-top: em-calc(11);
 $alert-padding-default-float: $alert-padding-top;
-$alert-padding-opposite-direction: $alert-padding-top + emCalc(10);
-$alert-padding-bottom: $alert-padding-top + emCalc(1);
+$alert-padding-opposite-direction: $alert-padding-top + em-calc(10);
+$alert-padding-bottom: $alert-padding-top + em-calc(1);
 
 /* Text style */
 
 $alert-font-weight: bold;
-$alert-font-size: emCalc(14);
+$alert-font-size: em-calc(14);
 $alert-font-color: #fff;
 $alert-font-color-alt: darken($secondary-color, 60%);
 
@@ -706,13 +747,13 @@ $alert-function-factor: 10%;
 $alert-border-style: solid;
 $alert-border-width: 1px;
 $alert-border-color: darken($primary-color, $alert-function-factor);
-$alert-bottom-margin: emCalc(20);
+$alert-bottom-margin: em-calc(20);
 
 /* Close Button style */
 
 $alert-close-color: #333;
-$alert-close-position: emCalc(5);
-$alert-close-font-size: emCalc(22);
+$alert-close-position: em-calc(5);
+$alert-close-font-size: em-calc(22);
 $alert-close-opacity: 0.3;
 $alert-close-opacity-hover: 0.5;
 $alert-close-padding: 5px 4px 4px;
@@ -730,8 +771,8 @@ $crumb-bg: lighten($secondary-color, 5%);
 
 /* Padding around the breadcrumbs. */
 
-$crumb-padding: emCalc(6, 14, 9);
-$crumb-side-padding: emCalc(12);
+$crumb-padding: em-calc(6, 14, 9);
+$crumb-side-padding: em-calc(12);
 
 /* Border styles. */
 
@@ -743,7 +784,7 @@ $crumb-radius: $global-radius;
 
 /* Various text styles for breadcrumbs. */
 
-$crumb-font-size: emCalc(11);
+$crumb-font-size: em-calc(11);
 $crumb-font-color: $primary-color;
 $crumb-font-color-current: #333;
 $crumb-font-color-unavailable: #999;
@@ -800,7 +841,7 @@ $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-form-checkbox-radius: 0;
 
 /* Custom select form element. */
 
@@ -809,8 +850,8 @@ $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(13) + ($form-spacing * 1.5);
-$custom-select-margin-bottom: emCalc(20);
+$custom-select-height: em-calc(13) + ($form-spacing * 1.5);
+$custom-select-margin-bottom: em-calc(20);
 $custom-select-font-color-selected: #141414;
 $custom-select-disabled-color: #888;
 
@@ -822,15 +863,15 @@ $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(14);
+$custom-dropdown-font-size: em-calc(14);
 $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-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
 $custom-dropdown-offset-top: none;
-$custom-dropdown-list-padding: emCalc(4);
-$custom-dropdown-left-padding: emCalc(6);
-$custom-dropdown-right-padding: emCalc(38);
-$custom-dropdown-list-item-min-height: emCalc(24);
+$custom-dropdown-list-padding: em-calc(4);
+$custom-dropdown-left-padding: em-calc(6);
+$custom-dropdown-right-padding: em-calc(38);
+$custom-dropdown-list-item-min-height: em-calc(24);
 
 
 /* Dropdown Variables */
@@ -862,15 +903,15 @@ $f-dropdown-triangle-side-offset: 10px;
 
 $f-dropdown-list-style: none;
 $f-dropdown-font-color: #555;
-$f-dropdown-font-size: emCalc(14);
-$f-dropdown-list-padding: emCalc(5, 10);
-$f-dropdown-line-height: emCalc(18);
+$f-dropdown-font-size: em-calc(14);
+$f-dropdown-list-padding: em-calc(5, 10);
+$f-dropdown-line-height: em-calc(18);
 $f-dropdown-list-hover-bg: #eeeeee;
 $dropdown-mobile-left: 0;
 
 /* When the dropdown has custom content. */
 
-$f-dropdown-content-padding: emCalc(20);
+$f-dropdown-content-padding: em-calc(20);
 
 
 /* Flex Video Variables */
@@ -878,9 +919,9 @@ $f-dropdown-content-padding: emCalc(20);
 
 /* Video container padding and margins */
 
-$flex-video-padding-top: emCalc(25);
+$flex-video-padding-top: em-calc(25);
 $flex-video-padding-bottom: 67.5%;
-$flex-video-margin-bottom: emCalc(16);
+$flex-video-margin-bottom: em-calc(16);
 
 /* Widescreen bottom padding */
 
@@ -892,7 +933,7 @@ $flex-video-widescreen-padding-bottom: 57.25%;
 
 /* Margins and padding of the inline list. */
 
-$inline-list-margin-bottom: emCalc(17, -22);
+$inline-list-margin-bottom: em-calc(17, -22);
 $inline-list-margin: 0 0;
 $inline-list-padding: 0;
 
@@ -916,7 +957,7 @@ $inline-list-children-display: block;
 
 $joyride-tip-bg: rgb(0,0,0);
 $joyride-tip-default-width: 300px;
-$joyride-tip-padding: emCalc(18, 20, 24);
+$joyride-tip-padding: em-calc(18, 20, 24);
 $joyride-tip-border: solid 1px #555;
 $joyride-tip-radius: 4px;
 $joyride-tip-position-offset: 22px;
@@ -924,7 +965,7 @@ $joyride-tip-position-offset: 22px;
 /* Tip font styles */
 
 $joyride-tip-font-color: #fff;
-$joyride-tip-font-size: emCalc(14);
+$joyride-tip-font-size: em-calc(14);
 $joyride-tip-header-weight: bold;
 
 /* Changes the nub size */
@@ -954,14 +995,14 @@ $joyride-screenfill: rgba(0,0,0,0.5);
 /* Text styles. */
 
 $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-$keystroke-font-size: emCalc(15);
+$keystroke-font-size: em-calc(15);
 $keystroke-font-color: #222;
 $keystroke-font-color-alt: #fff;
 $keystroke-function-factor: 7%;
 
 /* Keystroke padding. */
 
-$keystroke-padding: emCalc(2, 4, 0);
+$keystroke-padding: em-calc(2, 4, 0);
 
 /* Background and border styles. */
 
@@ -977,12 +1018,12 @@ $keystroke-radius: $global-radius;
 
 /* Style the labels */
 
-$label-padding: emCalc(3, 10, 4);
+$label-padding: em-calc(3, 10, 4);
 $label-radius: $global-radius;
 
 /* We use these to style the label text */
 
-$label-font-sizing: emCalc(14);
+$label-font-sizing: em-calc(14);
 $label-font-weight: bold;
 $label-font-color: #333;
 $label-font-color-alt: #fff;
@@ -1026,7 +1067,7 @@ $orbit-bullet-nav-color-active: #222;
 
 $orbit-slide-number-bg: rgba(0,0,0,0);
 $orbit-slide-number-font-color: #fff;
-$orbit-slide-number-padding: emCalc(5);
+$orbit-slide-number-padding: em-calc(5);
 
 /* Graceful Loading Wrapper and preloader */
 
@@ -1039,20 +1080,20 @@ $preloader-class: "preloader" ;
 
 /* Pagination container */
 
-$pagination-height: emCalc(24);
-$pagination-margin: emCalc(-5);
+$pagination-height: em-calc(24);
+$pagination-margin: em-calc(-5);
 
 /* List-item properties */
 
 $pagination-li-float: $default-float;
-$pagination-li-height: emCalc(24);
+$pagination-li-height: em-calc(24);
 $pagination-li-font-color: #222;
-$pagination-li-font-size: emCalc(14);
-$pagination-li-margin: emCalc(5);
+$pagination-li-font-size: em-calc(14);
+$pagination-li-margin: em-calc(5);
 
 /* Pagination anchor links */
 
-$pagination-link-pad: emCalc(1, 7, 1);
+$pagination-link-pad: em-calc(1, 7, 1);
 $pagination-link-font-color: #999;
 $pagination-link-active-bg: darken(#fff, 10%);
 
@@ -1087,8 +1128,8 @@ $panel-border-color: darken($panel-bg, $panel-function-factor);
 
 /* Inner padding and bottom margin */
 
-$panel-margin-bottom: emCalc(20);
-$panel-padding: emCalc(20);
+$panel-margin-bottom: em-calc(20);
+$panel-padding: em-calc(20);
 
 /* Font colors */
 
@@ -1105,33 +1146,33 @@ $price-table-border: solid 1px #ddd;
 
 /* Bottom margin of the pricing table */
 
-$price-table-margin-bottom: emCalc(20);
+$price-table-margin-bottom: em-calc(20);
 
 /* Control the title styles */
 
 $price-title-bg: #ddd;
-$price-title-padding: emCalc(15, 20);
+$price-title-padding: em-calc(15, 20);
 $price-title-align: center;
 $price-title-color: #333;
 $price-title-weight: bold;
-$price-title-size: emCalc(16);
+$price-title-size: em-calc(16);
 
 /* Control the price styles */
 
 $price-money-bg: #eee;
-$price-money-padding: emCalc(15, 20);
+$price-money-padding: em-calc(15, 20);
 $price-money-align: center;
 $price-money-color: #333;
 $price-money-weight: normal;
-$price-money-size: emCalc(20);
+$price-money-size: em-calc(20);
 
 /* Description styles */
 
 $price-bg: #fff;
 $price-desc-color: #777;
-$price-desc-padding: emCalc(15);
+$price-desc-padding: em-calc(15);
 $price-desc-align: center;
-$price-desc-font-size: emCalc(12);
+$price-desc-font-size: em-calc(12);
 $price-desc-weight: normal;
 $price-desc-line-height: 1.4;
 $price-desc-bottom-border: dotted 1px #ddd;
@@ -1139,9 +1180,9 @@ $price-desc-bottom-border: dotted 1px #ddd;
 /* List item styles */
 
 $price-item-color: #333;
-$price-item-padding: emCalc(15);
+$price-item-padding: em-calc(15);
 $price-item-align: center;
-$price-item-font-size: emCalc(14);
+$price-item-font-size: em-calc(14);
 $price-item-weight: normal;
 $price-item-bottom-border: dotted 1px #ddd;
 
@@ -1149,7 +1190,7 @@ $price-item-bottom-border: dotted 1px #ddd;
 
 $price-cta-bg: #f5f5f5;
 $price-cta-align: center;
-$price-cta-padding: emCalc(20, 20, 0);
+$price-cta-padding: em-calc(20, 20, 0);
 
 
 /* Progress Bar Variables */
@@ -1157,7 +1198,7 @@ $price-cta-padding: emCalc(20, 20, 0);
 
 /* Progress bar height */
 
-$progress-bar-height: emCalc(25);
+$progress-bar-height: em-calc(25);
 $progress-bar-color: transparent;
 
 /* Border styles */
@@ -1169,8 +1210,8 @@ $progress-bar-border-radius: $global-radius;
 
 /* Margin & padding */
 
-$progress-bar-pad: emCalc(2);
-$progress-bar-margin-bottom: emCalc(10);
+$progress-bar-pad: em-calc(2);
+$progress-bar-margin-bottom: em-calc(10);
 
 /* Meter colors */
 
@@ -1193,14 +1234,14 @@ $reveal-overlay-bg-old: #000;
 $reveal-modal-bg: #fff;
 $reveal-position-top: 50px;
 $reveal-default-width: 80%;
-$reveal-modal-padding: emCalc(20);
+$reveal-modal-padding: em-calc(20);
 $reveal-box-shadow: 0 0 10px rgba(#000,.4);
 
 /* Reveal close button */
 
-$reveal-close-font-size: emCalc(22);
-$reveal-close-top: emCalc(8);
-$reveal-close-side: emCalc(11);
+$reveal-close-font-size: em-calc(22);
+$reveal-close-top: em-calc(8);
+$reveal-close-side: em-calc(11);
 $reveal-close-color: #aaa;
 $reveal-close-weight: bold;
 
@@ -1219,8 +1260,8 @@ $close-reveal-modal-class: "close-reveal-modal";
 
 /* Padding and hover factor */
 
-$section-title-padding: emCalc(15);
-$section-content-padding: emCalc(15);
+$section-title-padding: em-calc(15);
+$section-content-padding: em-calc(15);
 $section-function-factor: 10%;
 
 /* Titles */
@@ -1239,14 +1280,14 @@ $section-border-color: #ccc;
 
 /* Font controls */
 
-$section-font-size: emCalc(14);
+$section-font-size: em-calc(14);
 
 /* Control the color of the background and some size options */
 
 $section-content-bg: #fff;
-$section-vertical-nav-min-width: emCalc(200);
-$section-vertical-tabs-title-width: emCalc(200);
-$section-bottom-margin: emCalc(20);
+$section-vertical-nav-min-width: em-calc(200);
+$section-vertical-tabs-title-width: em-calc(200);
+$section-bottom-margin: em-calc(20);
 
 $title-selector: ".title";
 $content-selector: ".content";
@@ -1257,19 +1298,19 @@ $content-selector: ".content";
 
 /* Padding */
 
-$side-nav-padding: emCalc(14, 0);
+$side-nav-padding: em-calc(14, 0);
 
 /* List styles */
 
 $side-nav-list-type: none;
 $side-nav-list-position: inside;
-$side-nav-list-margin: emCalc(0, 0, 7, 0);
+$side-nav-list-margin: em-calc(0, 0, 7, 0);
 
 /* Link styles */
 
 $side-nav-link-color: $primary-color;
 $side-nav-link-color-active: lighten(#000, 30%);
-$side-nav-font-size: emCalc(14);
+$side-nav-font-size: em-calc(14);
 $side-nav-font-weight: bold;
 
 /* Border styles */
@@ -1284,12 +1325,12 @@ $side-nav-divider-color: darken(#fff, 10%);
 
 /* Margin and padding */
 
-$sub-nav-list-margin: emCalc(-4, 0, 18);
-$sub-nav-list-padding-top: emCalc(4);
+$sub-nav-list-margin: em-calc(-4, 0, 18);
+$sub-nav-list-padding-top: em-calc(4);
 
 /* Definition */
 
-$sub-nav-font-size: emCalc(14);
+$sub-nav-font-size: em-calc(14);
 $sub-nav-font-color: #999;
 $sub-nav-font-weight: normal;
 $sub-nav-text-decoration: none;
@@ -1300,7 +1341,7 @@ $sub-nav-border-radius: 1000px;
 $sub-nav-active-font-weight: bold;
 $sub-nav-active-bg: $primary-color;
 $sub-nav-active-color: #fff;
-$sub-nav-active-padding: emCalc(3, 9);
+$sub-nav-active-padding: em-calc(3, 9);
 $sub-nav-active-cursor: $cursor-default-value;
 
 
@@ -1320,7 +1361,7 @@ $switch-height-tny: 22px;
 $switch-height-sml: 28px;
 $switch-height-med: 36px;
 $switch-height-lrg: 44px;
-$switch-bottom-margin: emCalc(20);
+$switch-bottom-margin: em-calc(20);
 
 /* Font sizes for our classes. */
 
@@ -1363,22 +1404,22 @@ $table-border-color: #ddd;
 /* Table head styles */
 
 $table-head-bg: #f5f5f5;
-$table-head-font-size: emCalc(14);
+$table-head-font-size: em-calc(14);
 $table-head-font-color: #222;
 $table-head-font-weight: bold;
-$table-head-padding: emCalc(8, 10, 10);
+$table-head-padding: em-calc(8, 10, 10);
 
 /* Row padding and font styles */
 
-$table-row-padding: emCalc(9, 10);
-$table-row-font-size: emCalc(14);
+$table-row-padding: em-calc(9, 10);
+$table-row-font-size: em-calc(14);
 $table-row-font-color: #222;
-$table-line-height: emCalc(18);
+$table-line-height: em-calc(18);
 
 /* Display and margin of tables */
 
 $table-display: table-cell;
-$table-margin-bottom: emCalc(20);
+$table-margin-bottom: em-calc(20);
 
 
 /* Image Thumbnail Variables */
@@ -1408,16 +1449,16 @@ $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(8);
+$tooltip-padding: em-calc(8);
 $tooltip-bg: #000;
-$tooltip-font-size: emCalc(15);
+$tooltip-font-size: em-calc(15);
 $tooltip-font-weight: bold;
 $tooltip-font-color: #fff;
 $tooltip-line-height: 1.3;
-$tooltip-close-font-size: emCalc(10);
+$tooltip-close-font-size: em-calc(10);
 $tooltip-close-font-weight: normal;
 $tooltip-close-font-color: #888;
-$tooltip-font-size-sml: emCalc(14);
+$tooltip-font-size-sml: em-calc(14);
 $tooltip-radius: $global-radius;
 $tooltip-pip-size: 5px;
 
@@ -1432,7 +1473,7 @@ $topbar-bg: #111 !default;
 /* Height and margin */
 
 $topbar-height: 45px;
-$topbar-margin-bottom: emCalc(30);
+$topbar-margin-bottom: em-calc(30);
 
 /* Control Input height for top bar */
 
@@ -1441,7 +1482,7 @@ $topbar-input-height: 2.45em;
 /* Controlling the styles for the title in the top bar */
 
 $topbar-title-weight: bold;
-$topbar-title-font-size: emCalc(17);
+$topbar-title-font-size: em-calc(17);
 
 /* Style the top bar dropdown elements */
 
@@ -1458,7 +1499,7 @@ $topbar-link-color: #fff;
 $topbar-link-color-hover: #fff;
 $topbar-link-color-active: #fff;
 $topbar-link-weight: bold;
-$topbar-link-font-size: emCalc(13);
+$topbar-link-font-size: em-calc(13);
 $topbar-link-hover-lightness: -30%; Darken by 30%
 $topbar-link-bg-hover: darken($topbar-bg, 3%);
 $topbar-link-bg-active: darken($topbar-bg, 3%);
@@ -1466,12 +1507,12 @@ $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(10);
+$topbar-dropdown-label-font-size: em-calc(10);
 
 /* Top menu icon styles */
 
 $topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: emCalc(13);
+$topbar-menu-link-font-size: em-calc(13);
 $topbar-menu-link-weight: bold;
 $topbar-menu-link-color: #fff;
 $topbar-menu-icon-color: #fff;
@@ -1481,7 +1522,7 @@ $topbar-menu-icon-color-toggled: #888;
 /* Transitions and breakpoint styles */
 
 $topbar-transition-speed: 300ms;
-$topbar-breakpoint: emCalc(940);
+$topbar-breakpoint: em-calc(940);
 $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
 
 /* Divider Styles */
@@ -1492,6 +1533,7 @@ $topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
 /* Sticky Class */
 
 $topbar-sticky-class: ".sticky";
+$topbar-arrows: true; //Set false to remove the triangle icon from the menu item
 ', :css %>