<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>KSS Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="../../../addons/jquery/bootstrap/css/bootstrap-3.3.6.min.css">
<link rel="stylesheet" href="../../../addons/jquery/bootstrap/css/bootstrap-theme-3.3.6.min.css">
<link rel="stylesheet" href="../../../addons/jquery/swipe/style.min.css">
<link rel="stylesheet" href="../style/base.css">
<link rel="stylesheet" href="../style/lms.css">
<link rel="stylesheet" href="../static/main.min.css">

</head>
<body id="kss-node">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">KSS Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-1.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Typography</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-2.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Buttons</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-3.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Course Box</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-3.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Section Course</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-4.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Top-bar</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-4.html#kssref-4-1">
                <span class="kss-nav__ref ">4.1</span
                ><span class="kss-nav__name">This is the top-bar of the site</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-4.html#kssref-4-2">
                <span class="kss-nav__ref ">4.2</span
                ><span class="kss-nav__name">Default Tab</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-4.html#kssref-4-3">
                <span class="kss-nav__ref ">4.3</span
                ><span class="kss-nav__name">Active Tab</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-4.html#kssref-4-4">
                <span class="kss-nav__ref ">4.4</span
                ><span class="kss-nav__name">Filters (left)</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-4.html#kssref-4-5">
                <span class="kss-nav__ref ">4.5</span
                ><span class="kss-nav__name">This is the mobile top-bar</span>
              </a>
            </li>
        </ul>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-5.html">
          <span class="kss-nav__ref">5</span
          ><span class="kss-nav__name">Inputs</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-6.html">
          <span class="kss-nav__ref">6</span
          ><span class="kss-nav__name">Top-menu</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-7.html">
          <span class="kss-nav__ref">7</span
          ><span class="kss-nav__name">User Panel</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-8.html">
          <span class="kss-nav__ref">8</span
          ><span class="kss-nav__name">Aside</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-9.html">
          <span class="kss-nav__ref">9</span
          ><span class="kss-nav__name">Footer</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-10.html">
          <span class="kss-nav__ref">10</span
          ><span class="kss-nav__name">Icons</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-11.html">
          <span class="kss-nav__ref">11</span
          ><span class="kss-nav__name">Tooltip</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-12.html">
          <span class="kss-nav__ref">12</span
          ><span class="kss-nav__name">Homepage</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-4" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-4">
          <span class="kss-title__ref">
              4
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Top-bar
        </a>
      </h1>


      <div class="kss-description">
        <p>This is the top-bar of the site</p>

      </div>
    </div>


      </div>
      <section id="kssref-4-1" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-4-1">
          <span class="kss-title__ref">
              4.1
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          This is the top-bar of the site
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <ul class="nav nav-tabs hidden-xs">
  <li class="active">
    <a class="" href="#">Home</a>
  </li>
  <li class="">
    <a class="" href="#">E-Learning</a>
  </li>
  <li class="">
    <a class="" href="#">Catalogo</a>
  </li>
</ul>
<ul class="nav nav-tabs visible-xs">
  <script type="text/javascript">
    (function ($) {
      $(window).load(function () {
        var dropdown_title = $('.tabs-dropdown').find('.active').text();
        $('.dropdown-title').html(dropdown_title);
      })
    })(jQuery);
  </script>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true"
       aria-expanded="false">
      <span class="dropdown-title">E-Learning</span> &nbsp;<span class="caret"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-left tabs-dropdown">
      <li>
        <a href="#">Home</a>
      </li>
      <li class="active">
        <a href="#">E-Learning</a>
      </li>
      <li>
        <a href="#">Percorsi formativi</a>
      </li>
      <li>
        <a href="#">Libreria contenuti</a>
      </li>
      <li>
        <a href="#">Comunicazioni</a>
      </li>
      <li>
        <a href="#">Classe</a>
      </li>
      <li>
        <a href="#">Catalogo Corsi</a>
      </li>
      <li>
       <a href="#">Videoconferenza</a>
      </li>
    </ul>
  </li>
</ul>
<ul class="nav nav-pills">
  <li class="">
    <a class="icon--all" href="#">Tutti i corsi aperti</a>
  </li>
  <li class="">
    <a class=" icon--concluded" href="#">Conclusi</a>
  </li>
  <li class="">
    <a class=" icon--active" href="#">In itinere</a>
  </li>
</ul>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav nav-tabs hidden-xs&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;
    &lt;a class=&quot;&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;&quot; href=&quot;#&quot;&gt;E-Learning&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;&quot; href=&quot;#&quot;&gt;Catalogo&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;nav nav-tabs visible-xs&quot;&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    (function ($) {
      $(window).load(function () {
        var dropdown_title = $(&#x27;.tabs-dropdown&#x27;).find(&#x27;.active&#x27;).text();
        $(&#x27;.dropdown-title&#x27;).html(dropdown_title);
      })
    })(jQuery);
  &lt;/script&gt;
  &lt;li class=&quot;dropdown&quot;&gt;
    &lt;a href=&quot;javascript:void(0)&quot; class=&quot;dropdown-toggle&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot;
       aria-expanded=&quot;false&quot;&gt;
      &lt;span class=&quot;dropdown-title&quot;&gt;E-Learning&lt;/span&gt; &amp;nbsp;&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu dropdown-menu-left tabs-dropdown&quot;&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;active&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;E-Learning&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Percorsi formativi&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Libreria contenuti&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Comunicazioni&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Classe&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Catalogo Corsi&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;a href=&quot;#&quot;&gt;Videoconferenza&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;nav nav-pills&quot;&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;icon--all&quot; href=&quot;#&quot;&gt;Tutti i corsi aperti&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot; icon--concluded&quot; href=&quot;#&quot;&gt;Conclusi&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot; icon--active&quot; href=&quot;#&quot;&gt;In itinere&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-4-2" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-4-2">
          <span class="kss-title__ref">
              4.2
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Default Tab
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <ul class="nav nav-tabs hidden-xs">
  <li class="">
    <a class="" href="#">Home</a>
  </li>
</ul>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav nav-tabs hidden-xs&quot;&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-4-3" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-4-3">
          <span class="kss-title__ref">
              4.3
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Active Tab
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <ul class="nav nav-tabs hidden-xs">
  <li class="active">
    <a class="" href="javascript:void(0);">Home</a>
  </li>
</ul>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav nav-tabs hidden-xs&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;
    &lt;a class=&quot;&quot; href=&quot;javascript:void(0);&quot;&gt;Home&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-4-4" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-4-4">
          <span class="kss-title__ref">
              4.4
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Filters (left)
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <ul class="nav nav-pills">
  <li class="">
    <a class="icon--all" href="#">Tutti i corsi aperti</a>
  </li>
  <li class="">
    <a class="icon--concluded" href="#">Conclusi</a>
  </li>
  <li class="">
    <a class="icon--active" href="#">In itinere</a>
  </li>
</ul>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav nav-pills&quot;&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;icon--all&quot; href=&quot;#&quot;&gt;Tutti i corsi aperti&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;icon--concluded&quot; href=&quot;#&quot;&gt;Conclusi&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;&quot;&gt;
    &lt;a class=&quot;icon--active&quot; href=&quot;#&quot;&gt;In itinere&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-4-5" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-4-5">
          <span class="kss-title__ref">
              4.5
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          This is the mobile top-bar
        </a>
      </h2>


      <div class="kss-description">
        <ul class="nav nav-tabs visible-xs">
  <script type="text/javascript">
    (function ($) {
      $(window).load(function () {
        var dropdown_title = $(&#39;.tabs-dropdown&#39;).find(&#39;.active&#39;).text();
        $(&#39;.dropdown-title&#39;).html(dropdown_title);
      })
    })(jQuery);
  </script>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true"
       aria-expanded="false">
      <span class="dropdown-title">E-Learning</span> &nbsp;<span class="caret"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-left tabs-dropdown">
      <li>
        <a href="#">Home</a>
      </li>
      <li class="active">
        <a href="#">E-Learning</a>
      </li>
      <li>
        <a href="#">Percorsi formativi</a>
      </li>
      <li>
        <a href="#">Libreria contenuti</a>
      </li>
      <li>
        <a href="#">Comunicazioni</a>
      </li>
      <li>
        <a href="#">Classe</a>
      </li>
      <li>
        <a href="#">Catalogo Corsi</a>
      </li>
      <li>
       <a href="#">Videoconferenza</a>
      </li>
    </ul>
  </li>
</ul>
      </div>
    </div>


      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="../../../addons/jquery/core/jquery-1.12.3.min.js"></script>
<script src="../../../addons/jquery/core/ui/js/jquery-ui-1.11.4.min.js"></script>
<script src="../../../addons/jquery/bootstrap/js/bootstrap-3.3.6.min.js"></script>
<script src="../static/main.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
