<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap material admin template">
  <meta name="author" content="">

  <title>NoteBook | Remark Material Admin Template</title>

  <link rel="apple-touch-icon" href="../../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../../global/css/bootstrap.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/css/bootstrap-extend.min.css?v2.1.0">
  <link rel="stylesheet" href="../../assets/css/site.min.css?v2.1.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../../global/css/skintools.min.css?v2.1.0">
  <script src="../../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../../global/vendor/animsition/animsition.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/vendor/asscrollable/asScrollable.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/vendor/switchery/switchery.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/vendor/intro-js/introjs.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/vendor/slidepanel/slidePanel.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/vendor/flag-icon-css/flag-icon.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/vendor/waves/waves.min.css?v2.1.0">

  <!-- Plugins For This Page -->
  <link rel="stylesheet" href="../../../global/vendor/bootstrap-markdown/bootstrap-markdown.min.css?v2.1.0">

  <!-- Page -->
  <link rel="stylesheet" href="../../assets/examples/css/apps/notebook.min.css?v2.1.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../../global/fonts/material-design/material-design.min.css?v2.1.0">
  <link rel="stylesheet" href="../../../global/fonts/brand-icons/brand-icons.min.css?v2.1.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700'>

  <link rel="stylesheet" href="../../../global/fonts/font-awesome/font-awesome.min.css?v2.1.0">

  <!--[if lt IE 9]>
    <script src="../../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body class="app-notebook page-aside-scroll">
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-inverse navbar-fixed-top navbar-mega"
  role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon md-more" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon md-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon md-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon md-chevron-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/buttons.html">Buttons</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/colors.html">Colors</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/icons.html">Icons</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/modals.html">Modals</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/panel-structure.html">Panels</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../structure/overlay.html">Overlay</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="md-chevron-right" aria-hidden="true"></i>
                              <a
                              href="../../uikit/typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon md-account" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon md-card" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon md-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon md-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon md-notifications" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon md-account bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon md-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2015-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon md-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2015-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon md-comment bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2015-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon md-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon md-email" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2015-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2015-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2015-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2015-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon md-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../../site-sidebar.tpl">
              <i class="icon md-comment" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon md-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon md-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <ul class="site-menu">
        <li class="site-menu-item">
          <a class="animsition-link" href="../../index.html">
            <i class="site-menu-icon md-view-dashboard" aria-hidden="true"></i>
            <span class="site-menu-title">Dashboard</span>
          </a>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-view-compact" aria-hidden="true"></i>
            <span class="site-menu-title">Layouts</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/menu-collapsed.html">
                <span class="site-menu-title">Menu Collapsed</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/grids.html">
                <span class="site-menu-title">Grid Scaffolding</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/layout-grid.html">
                <span class="site-menu-title">Layout Grid</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/headers.html">
                <span class="site-menu-title">Different Headers</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/panel-transition.html">
                <span class="site-menu-title">Panel Transition</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/boxed.html">
                <span class="site-menu-title">Boxed Layout</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/two-columns.html">
                <span class="site-menu-title">Two Columns</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/menubar-flipped.html">
                <span class="site-menu-title">Menubar Flipped</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/bordered-header.html">
                <span class="site-menu-title">Bordered Header</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../layouts/page-aside-fixed.html">
                <span class="site-menu-title">Page Aside Fixed</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-google-pages" aria-hidden="true"></i>
            <span class="site-menu-title">Pages</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <span class="site-menu-title">Errors</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/error-400.html">
                    <span class="site-menu-title">400</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/error-403.html">
                    <span class="site-menu-title">403</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/error-404.html">
                    <span class="site-menu-title">404</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/error-500.html">
                    <span class="site-menu-title">500</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/error-503.html">
                    <span class="site-menu-title">503</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/faq.html">
                <span class="site-menu-title">FAQ</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/gallery.html">
                <span class="site-menu-title">Gallery</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/gallery-grid.html">
                <span class="site-menu-title">Gallery Grid</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/search-result.html">
                <span class="site-menu-title">Search Result</span>
              </a>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <span class="site-menu-title">Maps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/map-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../pages/map-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/maintenance.html">
                <span class="site-menu-title">Maintenance</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/forgot-password.html">
                <span class="site-menu-title">Forgot Password</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/lockscreen.html">
                <span class="site-menu-title">Lockscreen</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/login.html">
                <span class="site-menu-title">Login</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/register.html">
                <span class="site-menu-title">Register</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/login-v2.html">
                <span class="site-menu-title">Login V2</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/register-v2.html">
                <span class="site-menu-title">Register V2</span>
                <div class="site-menu-label">
                  <span class="label label-info label-round">new</span>
                </div>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/login-v3.html">
                <span class="site-menu-title">Login V3</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/register-v3.html">
                <span class="site-menu-title">Register V3</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/user.html">
                <span class="site-menu-title">User List</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/invoice.html">
                <span class="site-menu-title">Invoice</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/blank.html">
                <span class="site-menu-title">Blank Page</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/email.html">
                <span class="site-menu-title">Email</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/code-editor.html">
                <span class="site-menu-title">Code Editor</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/profile.html">
                <span class="site-menu-title">Profile</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../pages/site-map.html">
                <span class="site-menu-title">Sitemap</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-palette" aria-hidden="true"></i>
            <span class="site-menu-title">Basic UI</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <span class="site-menu-title">Panel</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../uikit/panel-structure.html">
                    <span class="site-menu-title">Panel Structure</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../uikit/panel-actions.html">
                    <span class="site-menu-title">Panel Actions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../uikit/panel-portlets.html">
                    <span class="site-menu-title">Panel Portlets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/buttons.html">
                <span class="site-menu-title">Buttons</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/dropdowns.html">
                <span class="site-menu-title">Dropdowns</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/icons.html">
                <span class="site-menu-title">Icons</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/list.html">
                <span class="site-menu-title">List</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/tooltip-popover.html">
                <span class="site-menu-title">Tooltip &amp; Popover</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/modals.html">
                <span class="site-menu-title">Modals</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/tabs-accordions.html">
                <span class="site-menu-title">Tabs &amp; Accordions</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/images.html">
                <span class="site-menu-title">Images</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/badges-labels.html">
                <span class="site-menu-title">Badges &amp; Labels</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/progress-bars.html">
                <span class="site-menu-title">Progress Bars</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/carousel.html">
                <span class="site-menu-title">Carousel</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/typography.html">
                <span class="site-menu-title">Typography</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/colors.html">
                <span class="site-menu-title">Colors</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../uikit/utilities.html">
                <span class="site-menu-title">Utilties</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-format-color-fill" aria-hidden="true"></i>
            <span class="site-menu-title">Advanced UI</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item hidden-xs site-tour-trigger">
              <a href="javascript:void(0)">
                <span class="site-menu-title">Tour</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/animation.html">
                <span class="site-menu-title">Animation</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/highlight.html">
                <span class="site-menu-title">Highlight</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/lightbox.html">
                <span class="site-menu-title">Lightbox</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/scrollable.html">
                <span class="site-menu-title">Scrollable</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/rating.html">
                <span class="site-menu-title">Rating</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/context-menu.html">
                <span class="site-menu-title">Context Menu</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/alertify.html">
                <span class="site-menu-title">Alertify</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/masonry.html">
                <span class="site-menu-title">Masonry</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/treeview.html">
                <span class="site-menu-title">Treeview</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/toastr.html">
                <span class="site-menu-title">Toastr</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/maps-vector.html">
                <span class="site-menu-title">Vector Maps</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/maps-google.html">
                <span class="site-menu-title">Google Maps</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/sortable-nestable.html">
                <span class="site-menu-title">Sortable &amp; Nestable</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../advanced/bootbox-sweetalert.html">
                <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-puzzle-piece" aria-hidden="true"></i>
            <span class="site-menu-title">Structure</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/alerts.html">
                <span class="site-menu-title">Alerts</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/ribbon.html">
                <span class="site-menu-title">Ribbon</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/pricing-tables.html">
                <span class="site-menu-title">Pricing Tables</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/overlay.html">
                <span class="site-menu-title">Overlay</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/cover.html">
                <span class="site-menu-title">Cover</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/timeline-simple.html">
                <span class="site-menu-title">Simple Timeline</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/timeline.html">
                <span class="site-menu-title">Timeline</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/step.html">
                <span class="site-menu-title">Step</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/comments.html">
                <span class="site-menu-title">Comments</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/media.html">
                <span class="site-menu-title">Media</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/chat.html">
                <span class="site-menu-title">Chat</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/testimonials.html">
                <span class="site-menu-title">Testimonials</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/nav.html">
                <span class="site-menu-title">Nav</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/navbars.html">
                <span class="site-menu-title">Navbars</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/blockquotes.html">
                <span class="site-menu-title">Blockquotes</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/pagination.html">
                <span class="site-menu-title">Pagination</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../structure/breadcrumbs.html">
                <span class="site-menu-title">Breadcrumbs</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-widgets" aria-hidden="true"></i>
            <span class="site-menu-title">Widgets</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../../widgets/statistics.html">
                <span class="site-menu-title">Statistics Widgets</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../widgets/data.html">
                <span class="site-menu-title">Data Widgets</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../widgets/blog.html">
                <span class="site-menu-title">Blog Widgets</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../widgets/chart.html">
                <span class="site-menu-title">Chart Widgets</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../widgets/social.html">
                <span class="site-menu-title">Social Widgets</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../widgets/weather.html">
                <span class="site-menu-title">Weather Widgets</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-comment-alt-text" aria-hidden="true"></i>
            <span class="site-menu-title">Forms</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/general.html">
                <span class="site-menu-title">General Elements</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/material.html">
                <span class="site-menu-title">Material Elements</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/advanced.html">
                <span class="site-menu-title">Advanced Elements</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/layouts.html">
                <span class="site-menu-title">Form Layouts</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/wizard.html">
                <span class="site-menu-title">Form Wizard</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/validation.html">
                <span class="site-menu-title">Form Validation</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/masks.html">
                <span class="site-menu-title">Form Masks</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/editable.html">
                <span class="site-menu-title">Form Editable</span>
              </a>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <span class="site-menu-title">Editors</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../forms/editor-summernote.html">
                    <span class="site-menu-title">Summernote</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../forms/editor-markdown.html">
                    <span class="site-menu-title">Markdown</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../../forms/editor-ace.html">
                    <span class="site-menu-title">Ace Editor</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/image-cropping.html">
                <span class="site-menu-title">Image Cropping</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../forms/file-uploads.html">
                <span class="site-menu-title">File Uploads</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-border-all" aria-hidden="true"></i>
            <span class="site-menu-title">Tables</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/basic.html">
                <span class="site-menu-title">Basic Tables</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/bootstrap.html">
                <span class="site-menu-title">Bootstrap Tables</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/floatthead.html">
                <span class="site-menu-title">floatThead</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/responsive.html">
                <span class="site-menu-title">Responsive Tables</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/editable.html">
                <span class="site-menu-title">Editable Tables</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/jsgrid.html">
                <span class="site-menu-title">jsGrid</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/footable.html">
                <span class="site-menu-title">FooTable</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../tables/datatable.html">
                <span class="site-menu-title">DataTables</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-chart" aria-hidden="true"></i>
            <span class="site-menu-title">Chart</span>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/chartjs.html">
                <span class="site-menu-title">Chart.js</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/gauges.html">
                <span class="site-menu-title">Gauges</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/flot.html">
                <span class="site-menu-title">Flot</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/peity.html">
                <span class="site-menu-title">Peity</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/sparkline.html">
                <span class="site-menu-title">Sparkline</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/morris.html">
                <span class="site-menu-title">Morris</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/chartist.html">
                <span class="site-menu-title">Chartist.js</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/rickshaw.html">
                <span class="site-menu-title">Rickshaw</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/pie-progress.html">
                <span class="site-menu-title">Pie Progress</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../../charts/c3.html">
                <span class="site-menu-title">C3</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="site-menu-item has-sub active open">
          <a href="javascript:void(0)">
            <i class="site-menu-icon md-apps" aria-hidden="true"></i>
            <span class="site-menu-title">Apps</span>
            <div class="site-menu-label">
              <span class="label label-danger label-round">new</span>
            </div>
          </a>
          <ul class="site-menu-sub">
            <li class="site-menu-item">
              <a class="animsition-link" href="../contacts/contacts.html">
                <span class="site-menu-title">Contacts</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../calendar/calendar.html">
                <span class="site-menu-title">Calendar</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../taskboard/taskboard.html">
                <span class="site-menu-title">Taskboard</span>
              </a>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <span class="site-menu-title">Documents</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../documents/articles.html">
                    <span class="site-menu-title">Articles</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../documents/categories.html">
                    <span class="site-menu-title">Categories</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../documents/article.html">
                    <span class="site-menu-title">Article</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../forum/forum.html">
                <span class="site-menu-title">Forum</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../message/message.html">
                <span class="site-menu-title">Message</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../projects/projects.html">
                <span class="site-menu-title">Projects</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../mailbox/mailbox.html">
                <span class="site-menu-title">Mailbox</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../media/overview.html">
                <span class="site-menu-title">Media</span>
              </a>
            </li>
            <li class="site-menu-item active">
              <a class="animsition-link" href="notebook.html">
                <span class="site-menu-title">NoteBook</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../work/work.html">
                <span class="site-menu-title">Work</span>
              </a>
            </li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../location/location.html">
                <span class="site-menu-title">Location</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>


  <div class="page animsition">
    <!-- Notebook Sidebar -->
    <div class="page-aside">
      <div class="page-aside-switch">
        <i class="icon md-chevron-left" aria-hidden="true"></i>
        <i class="icon md-chevron-right" aria-hidden="true"></i>
      </div>
      <div class="page-aside-inner">
        <div class="input-search">
          <button class="input-search-btn" type="submit">
            <i class="icon md-search" aria-hidden="true"></i>
          </button>
          <form>
            <input class="form-control" type="text" placeholder="Search Keyword" name="">
          </form>
        </div>

        <div class="app-notebook-list" data-plugin="pageAsideScroll">
          <div data-role="container">
            <div data-role="content">
              <ul class="list-group">
                <li class="list-group-item active" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">New note</h4>
                  <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel
                    auctor neque.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">CSS</span>
                    <span class="time">Dec 12th, 7:35 am</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Neque porro</h4>
                  <p class="list-group-item-text">Maecenas vitae consectetur nibh, sed sodales odio.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">HTML</span>
                    <span class="time">Dec 10th, 6:28 pm</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Dolorem ipsum</h4>
                  <p class="list-group-item-text">Sed sed elit sapien. Praesent in gravida felis.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">JAVASCRIPT</span>
                    <span class="time">Dec 7th, 5:16 pm</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Quia dolor</h4>
                  <p class="list-group-item-text">Nullam sit amet imperdiet eros. Ut cursus est at tortor consequat
                    sodales.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">CSS</span>
                    <span class="time">Nov 25th, 11:53 am</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Sit amet</h4>
                  <p class="list-group-item-text">Donec placerat nulla sapien. Suspendisse nec euismod massa.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">CSS</span>
                    <span class="time">Nov 3th, 8:10 pm</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Consectetur</h4>
                  <p class="list-group-item-text">Sed maximus ex eu vulputate gravida. Integer lacinia pellentesque
                    aliquam.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">HTML</span>
                    <span class="time">Oct 20th, 3:55 am</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Adipisci velit</h4>
                  <p class="list-group-item-text">Pellentesque eu nibh tellus. Maecenas diam ante, elementum sed
                    erat non, mollis tincidunt felis.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">PHP</span>
                    <span class="time">Oct 18th, 10:40 pm</span>
                  </div>
                </li>
                <li class="list-group-item" data-toggle="context" data-target="#contextMenu">
                  <h4 class="list-group-item-heading">Nemo enim</h4>
                  <p class="list-group-item-text">Donec purus ligula, consequat quis mattis vel, posuere vitae
                    eros.</p>
                  <div class="info">
                    <i class="icon md-folder "></i>
                    <span class="category">WORDPRESS</span>
                    <span class="time">Oct 9th, 9:23 pm</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Notebook Sidebar -->

    <div class="page-main">

      <!--markdown  START-->
      <form>
        <textarea id="mdEdit" data-iconlibrary="fa">GitHub Flavored Markdown
================================

*View the [source of this content](http://github.github.com/github-flavored-markdown/sample_content.html).*

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red
Violets are blue

The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

A bit of the GitHub spice
-------------------------

In addition to the changes in the previous section, certain references are auto-linked:

* SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
* User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
* User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
* \#Num: #1
* User/#Num: mojombo#1
* User/Project#Num: mojombo/god#1

These are dangerous goodies though, and we need to make sure email addresses don't get mangled:

My email addy is tom@github.com.

Math is hard, let's go shopping
-------------------------------

In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

We all like making lists
------------------------

The above header should be an H2 tag. Now, for a list of fruits:

* Red Apples
* Purple Grapes
* Green Kiwifruits

Let's get crazy:

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

What about some code **in** a list? That's insane, right?

1. In Ruby you can map like this:

        ['a', 'b'].map { |x| x.uppercase }

2. In Rails, you can do a shortcut:

        ['a', 'b'].map(&:uppercase)

Some people seem to like definition lists

<dl>
  <dt>Lower cost</dt>
  <dd>The new version of this product costs significantly less than the previous one!</dd>
  <dt>Easier to use</dt>
  <dd>We've changed the product so that it's much easier to use!</dd>
</dl>

I am a robot
------------

Maybe you want to print `robot` to the console 1000 times. Why not?

    def robot_invasion
      puts("robot " * 1000)
    end

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

    <div class="footer">
        &copy; 2004 Foo Corporation
    </div>

Set in stone
------------

Preformatted blocks are useful for ASCII art:

<pre>
             ,-.
    ,     ,-.   ,-.
   / \   (   )-(   )
   \ |  ,.>-(   )-<
    \|,' (   )-(   )
     Y ___`-'   `-'
     |/__/   `-'
     |
     |
     |    -hrr-
  ___|_____________
</pre>

Playing the blame game
----------------------

If you need to blame someone, the best way to do so is by quoting them:

> I, at any rate, am convinced that He does not throw dice.

Or perhaps someone a little less eloquent:

> I wish you'd have given me this written question ahead of time so I
> could plan for it... I'm sure something will pop into my head here in
> the midst of this press conference, with all the pressure of trying to
> come up with answer, but it hadn't yet...
>
> I don't want to sound like
> I have made no mistakes. I'm confident I have. I just haven't - you
> just put me under the spot here, and maybe I'm not as quick on my feet
> as I should be in coming up with one.

Table for two
-------------

<table>
  <tr>
    <th>ID</th><th>Name</th><th>Rank</th>
  </tr>
  <tr>
    <td>1</td><td>Tom Preston-Werner</td><td>Awesome</td>
  </tr>
  <tr>
    <td>2</td><td>Albert Einstein</td><td>Nearly as awesome</td>
  </tr>
</table>

Crazy linking action
--------------------

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"
      </textarea>
      </form>
      <!--markdown  END-->

    </div>


    <!-- Site Action -->
    <div class="site-action">
      <button type="button" class="site-action-toggle btn-raised btn btn-success btn-floating">
        <i class="front-icon md-plus animation-scale-up" aria-hidden="true"></i>
        <i class="back-icon md-close animation-scale-up" aria-hidden="true"></i>
      </button>
      <div class="site-action-buttons">
        <button type="button" data-action="trash" class="btn-raised btn btn-success btn-floating animation-slide-bottom">
          <i class="icon md-delete" aria-hidden="true"></i>
        </button>
        <button type="button" data-action="folder" class="btn-raised btn btn-success btn-floating animation-slide-bottom">
          <i class="icon md-print" aria-hidden="true"></i>
        </button>
        <button type="button" data-action="folder" class="btn-raised btn btn-success btn-floating animation-slide-bottom">
          <i class="icon md-share" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <!-- End Site Action -->


    <!-- Create New Notes Modal -->
    <div class="modal fade" id="addNewNote" aria-hidden="true" aria-labelledby="addNewNote"
    role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
            <h4 class="modal-title">Create New Notes</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <input class="form-control" type="text" name="noteName" placeholder="Enter a new note name">
              </div>
            </form>
          </div>
          <div class="modal-footer text-left">
            <button class="btn btn-primary" data-dismiss="modal" type="submit">Create</button>
            <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
          </div>
        </div>
      </div>
    </div>
    <!-- End Create New Notes Modal -->


    <!--contextMenu STRAT-->
    <div id="contextMenu">
      <ul class="dropdown-menu" role="menu">
        <li><a tabindex="-1"><i class="icon md-folder" aria-hidden="true"></i> Archive</a></li>
        <li><a tabindex="-1"><i class="icon md-delete" aria-hidden="true"></i> Delete</a></li>
        <li><a tabindex="-1"><i class="icon md-print" aria-hidden="true"></i> Print</a></li>
        <li><a tabindex="-1"><i class="icon md-share" aria-hidden="true"></i> Share</a></li>
      </ul>
    </div>
    <!--contextMenu END-->

  </div>


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2015 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 icon md-favorite"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
  <script src="../../../global/vendor/waves/waves.min.js"></script>

  <!-- Plugins -->
  <script src="../../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Plugins For This Page -->
  <script src="../../../global/vendor/marked/marked.min.js"></script>
  <script src="../../../global/vendor/bootstrap-markdown/bootstrap-markdown.js"></script>
  <script src="../../../global/vendor/to-markdown/to-markdown.js"></script>
  <script src="../../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>
  <script src="../../../global/vendor/bootstrap-contextmenu/bootstrap-contextmenu.js"></script>

  <!-- Scripts -->
  <script src="../../../global/js/core.min.js"></script>
  <script src="../../assets/js/site.min.js"></script>

  <script src="../../assets/js/sections/menu.min.js"></script>
  <script src="../../assets/js/sections/menubar.min.js"></script>
  <script src="../../assets/js/sections/sidebar.min.js"></script>

  <script src="../../../global/js/configs/config-colors.min.js"></script>
  <script src="../../assets/js/configs/config-tour.min.js"></script>

  <script src="../../../global/js/components/asscrollable.min.js"></script>
  <script src="../../../global/js/components/animsition.min.js"></script>
  <script src="../../../global/js/components/slidepanel.min.js"></script>
  <script src="../../../global/js/components/switchery.min.js"></script>
  <script src="../../../global/js/components/tabs.min.js"></script>

  <script src="../../../global/js/plugins/action-btn.min.js"></script>


  <script src="../../assets/js/app.min.js"></script>

  <script src="../../assets/examples/js/apps/notebook.min.js"></script>


  <!-- Google Analytics -->
  <script>
    (function(i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function() {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js',
      'ga');

    ga('create', 'UA-65522665-1', 'auto');
    ga('send', 'pageview');
  </script>
</body>

</html>