<!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>
      </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>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-6.html#kssref-6-1">
                <span class="kss-nav__ref ">6.1</span
                ><span class="kss-nav__name">Top-menu</span>
              </a>
            </li>
        </ul>
      </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-6" 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-6">
          <span class="kss-title__ref">
              6
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Top-menu
        </a>
      </h1>


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

      </div>
    </div>


      </div>
      <section id="kssref-6-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-6-1">
          <span class="kss-title__ref">
              6.1
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Top-menu
        </a>
      </h2>


      <div class="kss-description">
        <p>N.B. when implementing remove the inline styling of the header tag</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <header class="header white-bg" style="position: static";>
  <nav>
    <div class="row-fluid" id="lms_menu_container">
      <div class="navbar-header">
        <a class="navbar-brand" href="">
          <img class="left_logo" width="120" src="../../../templates/standard/images/company_logo.png" alt="logo di sinistra">
        </a>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
          <span class="glyphicon glyphicon-align-justify"></span>
        </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse ">
        <div>
          <ul class="nav navbar-nav">
            <li>
              <a href="" class="" title="I miei corsi">I miei corsi</a>
            </li>
            <li>
              <a href="" class="" title="Catalogo Corsi">Catalogo Corsi</a>
            </li>
            <li>
              <a href="" class="" title="Community">Community</a>
            </li>
            <li>
              <a class="no-border-right no-before" href="#inline" class="modalbox" title="Help Desk">
                <span class="glyphicon glyphicon-question-sign top-menu__label">Help Desk</span>
              </a>
            </li>
            <li>
              <a class="no-border-right no-before" href="" title="Amministrazione">
                <span class="glyphicon glyphicon-cog top-menu__label">Amministrazione</span>
              </a>
            </li>
            <li>
              <div id="o-wrapper" class="o-wrapper">
                <button id="c-button--slide-right" class="c-button">
                  <a data-toggle="dropdown" href="#" title="Il mio profilo">
                    <span class="username icon--profile"> Super Amministratore</span>
                  </a>
                </button>
              </div>
            </li>
          </ul>
          <div class="top-menu__disclaimer">Testing forma.lms - Copyright © forma.lms<br />Powered by forma.lms CE</div>
          <div id="c-mask" class="c-mask"></div>
        </div>
      </div>
    </div>
  </nav>
</header>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;header class=&quot;header white-bg&quot; style=&quot;position: static&quot;;&gt;
  &lt;nav&gt;
    &lt;div class=&quot;row-fluid&quot; id=&quot;lms_menu_container&quot;&gt;
      &lt;div class=&quot;navbar-header&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;&quot;&gt;
          &lt;img class=&quot;left_logo&quot; width=&quot;120&quot; src=&quot;../../../templates/standard/images/company_logo.png&quot; alt=&quot;logo di sinistra&quot;&gt;
        &lt;/a&gt;
        &lt;button type=&quot;button&quot; class=&quot;navbar-toggle collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbar&quot;
                aria-expanded=&quot;false&quot; aria-controls=&quot;navbar&quot;&gt;
          &lt;span class=&quot;glyphicon glyphicon-align-justify&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id=&quot;navbar&quot; class=&quot;navbar-collapse collapse &quot;&gt;
        &lt;div&gt;
          &lt;ul class=&quot;nav navbar-nav&quot;&gt;
            &lt;li&gt;
              &lt;a href=&quot;&quot; class=&quot;&quot; title=&quot;I miei corsi&quot;&gt;I miei corsi&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;&quot; class=&quot;&quot; title=&quot;Catalogo Corsi&quot;&gt;Catalogo Corsi&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;&quot; class=&quot;&quot; title=&quot;Community&quot;&gt;Community&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a class=&quot;no-border-right no-before&quot; href=&quot;#inline&quot; class=&quot;modalbox&quot; title=&quot;Help Desk&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-question-sign top-menu__label&quot;&gt;Help Desk&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a class=&quot;no-border-right no-before&quot; href=&quot;&quot; title=&quot;Amministrazione&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-cog top-menu__label&quot;&gt;Amministrazione&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div id=&quot;o-wrapper&quot; class=&quot;o-wrapper&quot;&gt;
                &lt;button id=&quot;c-button--slide-right&quot; class=&quot;c-button&quot;&gt;
                  &lt;a data-toggle=&quot;dropdown&quot; href=&quot;#&quot; title=&quot;Il mio profilo&quot;&gt;
                    &lt;span class=&quot;username icon--profile&quot;&gt; Super Amministratore&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;top-menu__disclaimer&quot;&gt;Testing forma.lms - Copyright © forma.lms&lt;br /&gt;Powered by forma.lms CE&lt;/div&gt;
          &lt;div id=&quot;c-mask&quot; class=&quot;c-mask&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
&lt;/header&gt;</code></pre>
      </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>
