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


      <div class="kss-description">
        <p>This is the user panel</p>

      </div>
    </div>


      </div>
      <section id="kssref-7-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-7-1">
          <span class="kss-title__ref">
              7.1
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          User Panel
        </a>
      </h2>


      <div class="kss-description">
        <p>Remove the inline style when implementing</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="c-menu user-panel is-active" style="max-height:inherit;position:relative;top:auto;right:auto;bottom:auto;left:auto;">
 	<div class="container-fluid">
	<div class="row">
		<div class="col-xs-6">
		  	<a href="javascript:void(0)" class="c-menu__close"><span class="glyphicon glyphicon-remove">Hide menu</span></a>
		</div>
		<div class="col-xs-6">
			<a title="Logout" href="#">
				<span class="glyphicon glyphicon-off">Logout</span>
			</a>
		</div>
	</div>
	<div class="tabnav js-tabnav">
		<div class="tabnav__label-wrapper">
			<div class="tabnav__label selected" data-tab="profile">profile</div>
			<div class="tabnav__label" data-tab="credits">timeperiods</div>
		</div>
		<div class="tabnav__content-wrapper" style="height: 371px;">
			<div class="tabnav__content tabnav__content--profile is-visible">
				<div class="row profile">
					<div class="col-xs-5">
						<div class="boxed" style="background-image: url(../templates/standard/static/)images/icons/user-panel/icon--up-photo-placeholder.png"></div>
					</div>
					<div class="col-xs-7">
						<a href="#" title="User profile">
							<span class="glyphicon glyphicon-pencil">User profile</span>
						</a>
						<a href="#">Name</a>
						<a href="#">name@domain.com</a>
					</div>
				</div>
				<div class="row comunication">
					<div class="col-xs-4">
						<a class="btn btn-default" href="#">Certifications</a>
					</div>
					<div class="col-xs-4">
						<a class="btn btn-default" href="#">Skills</a>
					</div>
					<div class="col-xs-4">
						<a class="btn btn-default" href="#">Messages</a>
					</div>
				</div>
				<div class="row career">
					<div class="col-xs-12">
						<h2>Career</h2>
						<ul class="list-group">
							<li class="list-group-item">Total courses<span class="badge">8</span></li>
							<li class="list-group-item">Completed courses<span class="badge">8</span></li>
							<li class="list-group-item">Ending courses<span class="badge">4</span></li>
							<li class="list-group-item">Your courses as Student<span class="badge">4</span></li>
							<li class="list-group-item">Your courses as Administrator<span class="badge">12</span></li>
							<li class="list-group-item">Available Certifications<span class="badge"><a href="#">8</a></span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="tabnav__content tabnav__content--credits">
				<div class="row credits">
					<div class="col-xs-12">
						<div class="js-credits-ajax-container">
							<div class="table-credit-wrapper">
								<table class="table-credit">
									<thead>
										<tr class="table-credit__row table-credit__row--head">
											<td>Course</td>
											<td>Credits</td>
										</tr>
									</thead>
									<tbody>
										<tr class="table-credit__row">
											<td>Course 1 name</td>
											<td>10</td>
										</tr>
										<tr class="table-credit__row">
											<td>Course 2 name</td>
											<td>5</td>
										</tr>
										<tr class="table-credit__row">
											<td>Course 3 name</td>
											<td>15</td>
										</tr>
									</tbody>
									<tfoot>
										<tr class="table-credit__row table-credit__row--footer">
											<td>Total</td>
											<td>30</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row course-subscription">
	  <div class="col-xs-12">
		<div class="input-group">
			<form class="std_form" id="course_autoregistration" method="post" action="#">
				<div class="">
					<input type="hidden" id="authentic_request_course_autoregistration" name="authentic_request" value="">
					<input type="text" class="form-control" id="course_autoregistration_code" name="course_autoregistration_code" value="" maxlength="30" alt="" size="30" placeholder="Subscribtion code">
					<div class="input-group-btn">
						<input type="submit" class="button btn btn-default btn btn-default" id="subscribe_info" name="subscribe_info" value="Subscribe">
					</div>
				</div>
			</form>
		</div>
	  </div>
	</div>
	<div class="row news">
		<div class="col-xs-12">
			<h2 class="heading">News</h2>
			<div id="user-panel-carousel" class="carousel slide carousel-fade" data-ride="carousel">
				<ol class="carousel-indicators">
					<li class="" data-target="#user-panel-carousel" data-slide-to="0"></li>
					<li class="active" data-target="#user-panel-carousel" data-slide-to="1"></li>
					<li class="" data-target="#user-panel-carousel" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item active left">
						<h3>News title</h3>
						<p>News description</p>
						<span>gg-mm-yyyy</span>
					</div>
					<div class="item next left">
						<h3>News title</h3>
						<p>News description</p>
						<span>gg-mm-yyyy</span>
					</div>
					<div class="item">
						<h3>News title</h3>
						<p>News description</p>
						<span>gg-mm-yyyy</span>
					</div>
				</div>
			</div>
		</div>
  	</div>
	<div class="row lang">
		<div class="col-xs-6">
			<p>Cambia lingua</p>
		</div>
		<div class="col-xs-6">
			<ul class="list-inline" id="language_selection">
				<li><a class="lang-sprite lang_english" href="#" title="English"></a></li>
				<li><a class="lang-sprite lang_finnish" href="#" title="Finnish"></a></li>
				<li><a class="lang-sprite lang_italian current" href="#" title="Italiano"></a></li>
				<li><a class="lang-sprite lang_spanish" href="#" title="Spanish"></a></li>
			</ul>
		</div>
	</div>
	<div class="row footer">
		<div class="col-xs-12">
			<p>Testing forma.lms - Copyright © forma.lms<br>Powered by forma.lms CE</p>
		</div>
	</div>
</div>
</div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;c-menu user-panel is-active&quot; style=&quot;max-height:inherit;position:relative;top:auto;right:auto;bottom:auto;left:auto;&quot;&gt;
 	&lt;div class=&quot;container-fluid&quot;&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-xs-6&quot;&gt;
		  	&lt;a href=&quot;javascript:void(0)&quot; class=&quot;c-menu__close&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-remove&quot;&gt;Hide menu&lt;/span&gt;&lt;/a&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-xs-6&quot;&gt;
			&lt;a title=&quot;Logout&quot; href=&quot;#&quot;&gt;
				&lt;span class=&quot;glyphicon glyphicon-off&quot;&gt;Logout&lt;/span&gt;
			&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;tabnav js-tabnav&quot;&gt;
		&lt;div class=&quot;tabnav__label-wrapper&quot;&gt;
			&lt;div class=&quot;tabnav__label selected&quot; data-tab=&quot;profile&quot;&gt;profile&lt;/div&gt;
			&lt;div class=&quot;tabnav__label&quot; data-tab=&quot;credits&quot;&gt;timeperiods&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;tabnav__content-wrapper&quot; style=&quot;height: 371px;&quot;&gt;
			&lt;div class=&quot;tabnav__content tabnav__content--profile is-visible&quot;&gt;
				&lt;div class=&quot;row profile&quot;&gt;
					&lt;div class=&quot;col-xs-5&quot;&gt;
						&lt;div class=&quot;boxed&quot; style=&quot;background-image: url(../templates/standard/static/)images/icons/user-panel/icon--up-photo-placeholder.png&quot;&gt;&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class=&quot;col-xs-7&quot;&gt;
						&lt;a href=&quot;#&quot; title=&quot;User profile&quot;&gt;
							&lt;span class=&quot;glyphicon glyphicon-pencil&quot;&gt;User profile&lt;/span&gt;
						&lt;/a&gt;
						&lt;a href=&quot;#&quot;&gt;Name&lt;/a&gt;
						&lt;a href=&quot;#&quot;&gt;name@domain.com&lt;/a&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;row comunication&quot;&gt;
					&lt;div class=&quot;col-xs-4&quot;&gt;
						&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot;&gt;Certifications&lt;/a&gt;
					&lt;/div&gt;
					&lt;div class=&quot;col-xs-4&quot;&gt;
						&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot;&gt;Skills&lt;/a&gt;
					&lt;/div&gt;
					&lt;div class=&quot;col-xs-4&quot;&gt;
						&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot;&gt;Messages&lt;/a&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;row career&quot;&gt;
					&lt;div class=&quot;col-xs-12&quot;&gt;
						&lt;h2&gt;Career&lt;/h2&gt;
						&lt;ul class=&quot;list-group&quot;&gt;
							&lt;li class=&quot;list-group-item&quot;&gt;Total courses&lt;span class=&quot;badge&quot;&gt;8&lt;/span&gt;&lt;/li&gt;
							&lt;li class=&quot;list-group-item&quot;&gt;Completed courses&lt;span class=&quot;badge&quot;&gt;8&lt;/span&gt;&lt;/li&gt;
							&lt;li class=&quot;list-group-item&quot;&gt;Ending courses&lt;span class=&quot;badge&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
							&lt;li class=&quot;list-group-item&quot;&gt;Your courses as Student&lt;span class=&quot;badge&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
							&lt;li class=&quot;list-group-item&quot;&gt;Your courses as Administrator&lt;span class=&quot;badge&quot;&gt;12&lt;/span&gt;&lt;/li&gt;
							&lt;li class=&quot;list-group-item&quot;&gt;Available Certifications&lt;span class=&quot;badge&quot;&gt;&lt;a href=&quot;#&quot;&gt;8&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class=&quot;tabnav__content tabnav__content--credits&quot;&gt;
				&lt;div class=&quot;row credits&quot;&gt;
					&lt;div class=&quot;col-xs-12&quot;&gt;
						&lt;div class=&quot;js-credits-ajax-container&quot;&gt;
							&lt;div class=&quot;table-credit-wrapper&quot;&gt;
								&lt;table class=&quot;table-credit&quot;&gt;
									&lt;thead&gt;
										&lt;tr class=&quot;table-credit__row table-credit__row--head&quot;&gt;
											&lt;td&gt;Course&lt;/td&gt;
											&lt;td&gt;Credits&lt;/td&gt;
										&lt;/tr&gt;
									&lt;/thead&gt;
									&lt;tbody&gt;
										&lt;tr class=&quot;table-credit__row&quot;&gt;
											&lt;td&gt;Course 1 name&lt;/td&gt;
											&lt;td&gt;10&lt;/td&gt;
										&lt;/tr&gt;
										&lt;tr class=&quot;table-credit__row&quot;&gt;
											&lt;td&gt;Course 2 name&lt;/td&gt;
											&lt;td&gt;5&lt;/td&gt;
										&lt;/tr&gt;
										&lt;tr class=&quot;table-credit__row&quot;&gt;
											&lt;td&gt;Course 3 name&lt;/td&gt;
											&lt;td&gt;15&lt;/td&gt;
										&lt;/tr&gt;
									&lt;/tbody&gt;
									&lt;tfoot&gt;
										&lt;tr class=&quot;table-credit__row table-credit__row--footer&quot;&gt;
											&lt;td&gt;Total&lt;/td&gt;
											&lt;td&gt;30&lt;/td&gt;
										&lt;/tr&gt;
									&lt;/tfoot&gt;
								&lt;/table&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;row course-subscription&quot;&gt;
	  &lt;div class=&quot;col-xs-12&quot;&gt;
		&lt;div class=&quot;input-group&quot;&gt;
			&lt;form class=&quot;std_form&quot; id=&quot;course_autoregistration&quot; method=&quot;post&quot; action=&quot;#&quot;&gt;
				&lt;div class=&quot;&quot;&gt;
					&lt;input type=&quot;hidden&quot; id=&quot;authentic_request_course_autoregistration&quot; name=&quot;authentic_request&quot; value=&quot;&quot;&gt;
					&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;course_autoregistration_code&quot; name=&quot;course_autoregistration_code&quot; value=&quot;&quot; maxlength=&quot;30&quot; alt=&quot;&quot; size=&quot;30&quot; placeholder=&quot;Subscribtion code&quot;&gt;
					&lt;div class=&quot;input-group-btn&quot;&gt;
						&lt;input type=&quot;submit&quot; class=&quot;button btn btn-default btn btn-default&quot; id=&quot;subscribe_info&quot; name=&quot;subscribe_info&quot; value=&quot;Subscribe&quot;&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/form&gt;
		&lt;/div&gt;
	  &lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;row news&quot;&gt;
		&lt;div class=&quot;col-xs-12&quot;&gt;
			&lt;h2 class=&quot;heading&quot;&gt;News&lt;/h2&gt;
			&lt;div id=&quot;user-panel-carousel&quot; class=&quot;carousel slide carousel-fade&quot; data-ride=&quot;carousel&quot;&gt;
				&lt;ol class=&quot;carousel-indicators&quot;&gt;
					&lt;li class=&quot;&quot; data-target=&quot;#user-panel-carousel&quot; data-slide-to=&quot;0&quot;&gt;&lt;/li&gt;
					&lt;li class=&quot;active&quot; data-target=&quot;#user-panel-carousel&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
					&lt;li class=&quot;&quot; data-target=&quot;#user-panel-carousel&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
				&lt;/ol&gt;
				&lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
					&lt;div class=&quot;item active left&quot;&gt;
						&lt;h3&gt;News title&lt;/h3&gt;
						&lt;p&gt;News description&lt;/p&gt;
						&lt;span&gt;gg-mm-yyyy&lt;/span&gt;
					&lt;/div&gt;
					&lt;div class=&quot;item next left&quot;&gt;
						&lt;h3&gt;News title&lt;/h3&gt;
						&lt;p&gt;News description&lt;/p&gt;
						&lt;span&gt;gg-mm-yyyy&lt;/span&gt;
					&lt;/div&gt;
					&lt;div class=&quot;item&quot;&gt;
						&lt;h3&gt;News title&lt;/h3&gt;
						&lt;p&gt;News description&lt;/p&gt;
						&lt;span&gt;gg-mm-yyyy&lt;/span&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
  	&lt;/div&gt;
	&lt;div class=&quot;row lang&quot;&gt;
		&lt;div class=&quot;col-xs-6&quot;&gt;
			&lt;p&gt;Cambia lingua&lt;/p&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-xs-6&quot;&gt;
			&lt;ul class=&quot;list-inline&quot; id=&quot;language_selection&quot;&gt;
				&lt;li&gt;&lt;a class=&quot;lang-sprite lang_english&quot; href=&quot;#&quot; title=&quot;English&quot;&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a class=&quot;lang-sprite lang_finnish&quot; href=&quot;#&quot; title=&quot;Finnish&quot;&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a class=&quot;lang-sprite lang_italian current&quot; href=&quot;#&quot; title=&quot;Italiano&quot;&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a class=&quot;lang-sprite lang_spanish&quot; href=&quot;#&quot; title=&quot;Spanish&quot;&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;row footer&quot;&gt;
		&lt;div class=&quot;col-xs-12&quot;&gt;
			&lt;p&gt;Testing forma.lms - Copyright © forma.lms&lt;br&gt;Powered by forma.lms CE&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/div&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>
