modularis 0.0.1

data/docs/components/panels.html.erb

@@ -0,0 +1,123 @@
+<% @side_nav = "css" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Panels" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">A panel is a simple, helpful Modularis component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them or add emphasis to a section. The width is controlled by the grid columns you put them inside.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-6 columns">
+            <div class="panel">
+              <h5>This is a regular panel.</h5>
+              <p>It has an easy to override visual style, and is appropriately subdued.</p>
+            </div>
+          </div>
+          <div class="large-6 columns">
+            <div class="panel callout radius">
+              <h5>This is a callout panel.</h5>
+              <p>It's a little ostentatious, but useful for important content.</p>
+            </div>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build panels in Modularis 4, either with our predefined HTML or with our mixin. Building panels using our predefined class isn't hard at all. You'll start with <code>&lt;div&gt;</code> and add a class of <code>.panel</code> to it. From there, you just need to add content inside, anything will do.</p>
+
+        <p>Available HTML class options:</p>
+        <ul class="disc">
+          <li>Adding <code>.callout</code> to your panel will make it our default blue and add a shiny top edge to help it stand out.</li>
+          <li>You may also you <code>.radius</code> to add a tasteful border-radius to the mix.</li>
+        </ul>
+
+<%= code_example '
+<div class="panel">
+  <!-- Content here -->
+</div>', :html %>
+
+        <div class="panel">Basic panel with content.</div>
+
+        <p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected panels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style panels so that you can code smarter. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_panels.scss">_panels.scss</a> from Github and throw them into a Modularis folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "modularis/modularis-global", "modularis/components/global", "modularis/components/panels";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the <code>&lt;div&gt;</code>.</p>
+
+<%= code_example '
+<div class="your-class-name">
+  <!-- Content here -->
+</div>', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your panel using our global mixin by including it on your own custom class or ID. The mixin contains all the necessary styles and they can be customized a bit within the mixin. The rest of the important styles are controlled by variables. The code looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include panel; }', :css %>
+
+        <div class="panel">
+          Panel content goes here...
+        </div>
+
+        <p>You also have <strong>two options</strong> available to customize the panel within the mixin. These control the background color (which also effect border and font color) and the interior padding of the panel itself.</p>
+
+<%= code_example '
+.your-class-name { @include panel($bg, $padding); }
+
+/* This controls the background color, border color and type color based on brightness of the bg. */
+$bg: $secondary-color
+
+/* This controls the interior padding */
+$padding: $panel-padding
+', :css %>
+
+        <div class="panel-custom">
+          Custom panel. Hell yeah! We used @include panel(pink, 40px);
+        </div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* 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;', :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>_modularis-global.scss</strong>.</p>
+
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/pricing-tables.html.erb

@@ -0,0 +1,156 @@
+<% @side_nav = "css" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Pricing Tables" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you're making a rockin' marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of their container and are made from a simple unordered list.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-4 columns large-centered">
+            <ul class="pricing-table">
+              <li class="title">Standard</li>
+              <li class="price">$99.99</li>
+              <li class="description">An awesome description</li>
+              <li class="bullet-item">1 Database</li>
+              <li class="bullet-item">5GB Storage</li>
+              <li class="bullet-item">20 Users</li>
+              <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build pricing tables in Modularis 4: with our predefined HTML or with our mixins. Building pricing tables with our predefined classes is quite easy. You'll start with an <code>&lt;ul&gt;</code> and add a class of <code>.pricing-table</code> to it. From there, you just need to add list items inside that represent each piece of the table.</p>
+
+        <p>Available HTML class options for the list items:</p>
+        <ul class="disc">
+          <li><code>&lt;li class="title"&gt;</code>: Creates the styles for a title.</li>
+          <li><code>&lt;li class="price"&gt;</code>: Add a price that stands out.</li>
+          <li><code>&lt;li class="description"&gt;</code>: If you need to describe the plan, add this.</li>
+          <li><code>&lt;li class="bullet-item"&gt;</code>: To call out features, use this list item.</li>
+          <li><code>&lt;li class="cta-button"&gt;</code>: To add a button inside a list item, use this.</li>
+        </ul>
+
+<%= code_example '
+<ul class="pricing-table">
+  <li class="title">Standard</li>
+  <li class="price">$99.99</li>
+  <li class="description">An awesome description</li>
+  <li class="bullet-item">1 Database</li>
+  <li class="bullet-item">5GB Storage</li>
+  <li class="bullet-item">20 Users</li>
+  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
+</ul>', :html %>
+
+        <p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected pricing-tables from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_pricing-tables.scss">_pricing-tables.scss</a> from Github and throw them into a Modularis folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "modularis/modularis-global", "modularis/components/global", "modularis/components/pricing-tables";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like with the <code>&lt;ul&gt;</code> and the list items inside it.</p>
+
+<%= code_example '
+<ul class="your-pricing-class">
+  <li class="your-title-class">Title</li>
+  <li class="your-price-class">$$$</li>
+  <li class="your-desc-class">...</li>
+  <li class="your-bullet-class">Bullet</li>
+  <li class="your-cta-class"><a class="your-button-class" href="#">Button</a></li>
+</ul>', :html %>
+
+        <h5>The Container Mixin</h5>
+        <p>Pricing tables are built up from an unordered list. We give this container some necessary styles by using our container mixin. There are no customizable options within the mixin, but everything can be changed using the SCSS variables below.</p>
+
+<%= code_example '
+.your-pricing-class  { @include pricing-table-container;
+  .your-title-class  { @include pricing-table-title; }
+  .your-price-class  { @include pricing-table-price; }
+  .your-desc-class   { @include pricing-table-description; }
+  .your-bullet-class { @include pricing-table-bullet; }
+  .your-cta-class    { @include pricing-table-cta; }
+}', :css %>
+
+        <ul class="pricing-table">
+          <li class="title">Standard</li>
+          <li class="price">$99.99</li>
+          <li class="description">An awesome description</li>
+          <li class="bullet-item">1 Database</li>
+          <li class="bullet-item">5GB Storage</li>
+          <li class="bullet-item">20 Users</li>
+          <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
+        </ul>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* 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;', :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>_modularis-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/progress-bars.html.erb

@@ -0,0 +1,123 @@
+
+<% @side_nav = "css" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Progress Bars" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader"><p>A simple way to add a progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.</h4>
+
+        <div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
+        <div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
+        <div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
+        <div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to add progress bars labels in Modularis 4: with our predefined HTML classes or with our mixins. Building progress bars using our predefined classes is simple, you'll just need to write a <code>&lt;div class="progress"&gt;</code> and inside of that a <code>&lt;span class="meter"&gt;</code>. The meter is the element that you can set a width to, either inline or programmatically on your own accord. The simplest way to do this is to change the <code>style="width:%"</code> property on the meter, itself.</p>
+
+<%= code_example '
+<div class="progress"><span class="meter"></span></div>', :html %>
+
+        <div class="progress"><span class="meter"></span></div>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li>The color classes include: <code>.secondary, .alert</code> or <code>.success</code></li>
+          <li>The radius classes include: <code>.radius</code> or <code>.round</code>.</li>
+          <li>You may also you the grid width classes: <code>.small-#</code> or <code>.large-#</code></li>
+        </ul>
+
+<%= code_example '
+<div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>', :html %>
+
+        <div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>
+
+        <p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style progress bars. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_progress-bars.scss">_progress-bars.scss</a> from Github and throw them into a Modularis folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "modularis/modularis-global", "modularis/components/global", "modularis/components/progress-bars";
+', :css %>
+
+        <h5>Container Mixin</h5>
+        <p>Progress bars are made from a container and a meter. The container element holds most of the styles that come across and holds the meter, itself. You can create progress bars by creating a <code>&lt;div&gt;</code> and giving it a unique class or ID, then applying the mixin styles to it.</p>
+
+<%= code_example '
+.your-class-name { @include progress-container; }', :css %>
+
+        <div class="progress"></div>
+
+        <h5>Meter Mixin</h5>
+        <p>The next step is to include an element inside of your container that will be styled as the meter.
+
+<%= code_example '
+.your-class-name { @include progress-container;
+  & > span { @include progress-meter($bg); }
+}
+
+/* We can set the background color of the meter to a variable or any color value */
+$bg: $primary-color
+', :css %>
+
+        <div class="progress"><span class="meter"></span></div>
+
+        <h5>Adding Border Radius</h5>
+        <p>Like we mentioned on a few of the other component pages, you have access to some global mixins that can add even more style to elements like this. Here's an example of using border radius:</p>
+
+<%= code_example '
+.your-class-name {
+  @include progress-container;
+  @include radius(6px);
+  & > span {
+    @include progress-meter(pink);
+    @include radius(5px);
+  }
+}', :css %>
+
+        <div class="progress-custom"><span style="width:33%"></span></div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to se the prog bar height */
+$progress-bar-height: emCalc(25px);
+
+/* 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-bar-color: transparent;
+$progress-meter-color: $primary-color;
+$progress-meter-secondary-color: $secondary-color;
+$progress-meter-success-color: $success-color;
+$progress-meter-alert-color: $alert-color;', :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>_modularis-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/reveal.html.erb

@@ -0,0 +1,162 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Reveal" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Modularis includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
+
+        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
+        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
+
+        <hr>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With HTML Classes</h3>
+        <p>Reveal modals are easy to build, just make sure they live right above your closing <code>body</code> tag or they won't work properly. Follow the markup below to get started:</p>
+
+<%= code_example '
+<div id="myModal" class="reveal-modal">
+  <h2>Awesome. I have it.</h2>
+  <p class="lead">Your couch.  It is mine.</p>
+  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li><code>tiny</code>: Set the width to 30%.</li>
+          <li><code>small</code>: Set the width to 40%.</li>
+          <li><code>medium</code>: Set the width to 60%.</li>
+          <li><code>large</code>: Set the width to 70%.</li>
+          <li><code>xlarge</code>: Set the width to 95%.</li>
+        </ul>
+
+        <p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <h5>Firing a Reveal Modal</h5>
+        <p>To launch a modal, just add a <code>data-reveal-id</code> to the object which you want to fire the modal when clicked. The <code>data-reveal-id</code> needs to match the <code>id</code> of your reveal.</p>
+
+    <%= code_example '
+<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>', :html %>
+
+        <p>You can also open and close Reveal via JavaScript:</p>
+
+<%= code_example "
+// trigger by event
+$('a.reveal-link').trigger('click');
+$('a.close-reveal-modal').trigger('click');
+
+// or directly on the modal
+$('#myModal').modularis('reveal', 'open');
+$('#myModal').modularis('reveal', 'close');
+", :js %>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+
+    <%= code_example '
+/* 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:    emCalc(15px);
+$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;', :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>_modularis-global.scss</strong>.</p>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You don't need this JS to create reveal modals with Modularis. The only reason you'll need to include <code>modularis.reveal.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>modularis.js</code> above the alert plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+
+        <p><a href="../javascript.html" title="How to install Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
+
+        <p>Required Modularis Library: <code>modularis.reveal.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Reveal options can only be passed in during initialization at this time. However, you can bind to the <i>open</i>, <i>opened</i>, <i>close</i>, and <i>closed</i> events.</p>
+
+    <%= code_example "
+{
+  animation: 'fadeAndPop',
+  animationSpeed: 250,
+  closeOnBackgroundClick: true,
+  dismissModalClass: 'close-reveal-modal',
+  bgClass: 'reveal-modal-bg',
+  open: function(){},
+  opened: function(){},
+  close: function(){},
+  closed: function(){},
+  bg : $('.reveal-modal-bg'),
+  css : {
+    open : {
+      'opacity': 0,
+      'visibility': 'visible',
+      'display' : 'block'
+    },
+    close : {
+      'opacity': 1,
+      'visibility': 'hidden',
+      'display': 'none'
+    }
+  }
+}", :js %>
+
+      </div>
+    </div>
+</div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+<div id="firstModal" class="reveal-modal">
+  <h2>This is a modal.</h2>
+  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
+  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
+  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
+
+<div id="secondModal" class="reveal-modal">
+  <h2>This is a second modal.</h2>
+  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
+
+<div id="videoModal" class="reveal-modal large">
+  <h2>This modal has video</h2>
+  <div class="flex-video">
+    <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
+  </div>
+
+  <a class="close-reveal-modal">&#215;</a>
+</div>
+