zurb-foundation 4.2.1 → 4.2.2

data/docs/components/split-buttons.html.erb

@@ -105,37 +105,37 @@ $base-style: true
 <%= code_example '
 /* 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);
+$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);
+$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);
+$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);
+$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);
+$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);
 ', :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>_variables.scss</strong>.</p>

data/docs/components/sub-nav.html.erb

@@ -94,22 +94,22 @@ $active-bg: $sub-nav-active-bg
 
 <%= code_example '
 /* We use these to control margin and padding */
-$sub-nav-list-margin:        emCalc(-4px) 0 emCalc(18px);
-$sub-nav-list-padding-top:   emCalc(4px);
+$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;
+$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:      $cursor-default-value;', :css %>
+$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;', :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>_variables.scss</strong>.</p>
 

data/docs/components/switch.html.erb

@@ -245,38 +245,38 @@ $base-style: true
 
 <%= code_example '
 /* 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;
+$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);
+$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;
+$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;
+$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;', :css %>
+$switch-label-outline: 1px dotted #888;', :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>_variables.scss</strong>.</p>
 

data/docs/components/tables.html.erb

@@ -88,30 +88,30 @@
 
 <%= code_example '
 /* These control the background color for the table and even rows */
-$table-bg:               #fff;
-$table-even-row-bg:      #f9f9f9;
+$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;
+$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-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);
+$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);
+$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);', :css %>
+$table-display: table-cell;
+$table-margin-bottom: emCalc(20px);', :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>_variables.scss</strong>.</p>
 

data/docs/components/thumbnails.html.erb

@@ -70,14 +70,14 @@ $box-shadow-hover: $thumb-box-shadow-hover
 
 <%= code_example '
 /* 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-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-radius: $global-radius;
 $thumb-transition-speed: 200ms;', :css %>
 
       </div>

data/docs/components/tooltips.html.erb

@@ -46,25 +46,25 @@
 
         <h4>Available SCSS Variables</h4>
 <%= code_example '
-$has-tip-border-bottom:       dotted 1px #ccc;
-$has-tip-font-weight:         bold;
-$has-tip-font-color:          #333;
+$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;
+$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;
 ', :css %>
 
         <hr>

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

@@ -76,10 +76,10 @@
       <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. 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>
+        <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-options="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>
+        <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>
 
         <h5>Positioning the Bar</h5>
         <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>
@@ -270,62 +270,62 @@
 
 <%= 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);
+$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;
+$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-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);
+$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 */
-$topbar-media-query:                   "only screen and (min-width:"#{$topbar-breakpoint}")";
+$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%);
+$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 %>
+$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>_variables.scss</strong>.</p>
 

data/docs/components/type.html.erb

@@ -290,102 +290,102 @@
 
 <%= code_example '
 /* 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;
+$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;
+$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;
+$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%);
+$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;
-$paragraph-text-rendering:             optimizeLegibility;
+$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;
+$paragraph-text-rendering: optimizeLegibility;
 
 /* 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;
+$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%);
+$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);
+$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(20px);
-$list-nested-margin:                   emCalc(20px);
-$definition-list-header-weight:        bold;
+$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);
+$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;
+$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;
+$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;
+$microformat-padding: emCalc(10px) emCalc(12px);
+$microformat-margin: 0 0 emCalc(20px) 0;
 
 /* We use these to control the border styles */
-$microformat-border-width:             1px;
-$microformat-border-style:             solid;
-$microformat-border-color:             #ddd;
+$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);
+$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;
+$microformat-summary-font-weight: bold;
 
 /* We use this to control abbr padding */
-$microformat-abbr-padding:             0 emCalc(1px);
+$microformat-abbr-padding: 0 emCalc(1px);
 
 /* We use this to control abbr font styles */
-$microformat-abbr-font-weight:         bold;
-$microformat-abbr-font-decoration:     none;
+$microformat-abbr-font-weight: bold;
+$microformat-abbr-font-decoration: none;
 ', :css %>
 
       </div>