<style>
  #help-partial {
    width: 97%;
    height:380px;
    position: absolute;
    overflow: hidden;
    background: white;
  }
  
  #help-partial #thelist {
    width: 100%;
  }
  #help-partial .help-table {
    margin: 10px 0px 0px 0px;
    table-layout: fixed;
    color: #404040;
  }
  #help-partial .help-table thead {
    margin-bottom: 20px;
  }
  #help-partial .help-table td {
    border: 1px solid #dddddd !important;
  }
  #help-partial .help-table .img {
    text-align: center;
    width: 120px;
  }
  #help-partial .help-table .bold {
    font-weight: bold;
  }
  #help-partial .tab-content {
    margin-left: 0px !important;
  }

  #help-partial li {
    margin-left: 0px !important;
    text-align: center;
    font-family: Helvetica;
    border: 1px solid #c3c3c3;
    background-color: #eaeaea !important;
    width: 33%;
    font-weight: bold;
  }
  #help-partial .nav > li > a:hover {
    background-color: #eaeaea;
  }
  #help-partial .nav > li > .active:hover {
    background-color: #003a55 !important;
  }
  #help-partial .active, ul {
    border: none !important;
  }

  #help-partial a {
    margin: 0px !important;
    color: #000000 !important;
  }

  #help-partial .tab-pane {
    margin-top: 0px;
  }

  #help-partial li.active a {
    color: #003a55 !important;
  }

  #help-partial li.active a:hover {
    background: white !important;
  }

  #help-partial #table_container {
    height: 100%;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  #help-partial #myTab {
    width: 100%;
  }
</style>
<div id="help-partial">
  <div id="thelist">
    <ul class="nav nav-tabs" id="myTab">
      <li class="active">
        <a href="#navigation" data-toggle="tab">Navigation</a>
      </li>
      <li>
        <a href="#settings" data-toggle="tab">View Settings</a>
      </li>
      <li>
        <a href="#tools" data-toggle="tab">Tools</a>
      </li>
    </ul>
    <div id="table_container">
      <div class="tab-content">
        <div class="tab-pane active" id="navigation" style='width:100%;height:300px;'>
          <div iscroll-watcher>
            <span>You will use these tools to navigate through the book.  </span>
            <table cellpadding="10" class="help-table table">
              <tbody>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/TOC.png" /></td>
                  <td class="content"><span class="bold">Table of Contents  </span><span>allows you to navigate to a specific location within the book. Click on the icon and the drop down with Contents will appear. Click on the contents to navigate to the page. Click outside drop down or any of the buttons to move out of the Table of Contents.  </span></td>
                </tr>
                <tr >
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/next_prev.PNG" /></td>
                  <td class="content"><span>Use the<span> <span class="bold">Right Arrow button  </span> <span>to go to the next page, and the  </span> <span class="bold">Left Arrow button   </span><span>to go to the previous page in the book  </span> </td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/search.png" /><img ng-src="themes/{{CONFIG.theme}}/images/help/speechnotes.PNG" /></td>
                  <td class="content"><span class="bold">Search  </span><span>allows you to look for any word or phrase in the book. Click inside the Search box and type your search text, then hit the Enter key. A new window will open up on the screen. Click on the result. System will redirect you to the page. Alternately, user can search terms within the books by selecting a word from the book and clicking &apos;SEARCH&apos; pop up (4th option from left in the pop up).  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/home.png" /></td>
                  <td class="content"><span><span class="bold">Back to Bookshelf  </span> allows you to return to list of books/bookshelf from any part of the book. <span></td>
                </tr>
              </tbody>
            </table>              
          </div>
        </div>
        <div class="tab-pane" id="settings" style='width:100%;height:300px;'>
          <div iscroll-watcher>
            <span>View Settings You will use these settings for the ease of viewing.  </span>
            <table cellpadding="20" class="help-table table">

              <tbody>
                <tr >
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/zoomin.png" /></td>
                  <td class="content"><span>Click the<span class="bold"> Zoom In   </span>button to expand/magnify the page view.   </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/zoomout.png" /></td>
                  <td class="content"><span>Click the<span class="bold"> Zoom Out   </span>button to reduce/demagnify the page view  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/fit_vertical.png" /></td>
                  <td class="content"><span>Click the<span class="bold"> Fit Height   </span> to fit the height of page.  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/fit_horizontal.png" /></td>
                  <td class="content"><span>Click the<span class="bold"> Fit Width   </span>icon to fit the width of page.  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/single_view01.png" /></td>
                  <td class="content"><span class="bold">Single Page View   </span><span>allows you to view the book one page at a time. Click the button to activate this view.   </span></td>
                </tr>
                <tr >
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/double_view01.png" /></td>
                  <td class="content"><span class="bold">Double Page View   </span><span>allows you to view the book in 2-page spreads. Click the button to activate this view.  </span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane" id="tools" style='width:100%;height:300px;'>
          <div iscroll-watcher>
            <span>You can access a variety of tools using these buttons.  </span>
            <table cellpadding="20" class="help-table table">
              <tbody>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/speechnotes.PNG" /></td>
                  <td class="content"><span class="bold">Notes   </span><span>allow you to save ideas as you read a page. Select the word. A pop up would emerge. Click on Note icon to activate this tool. A note editor would then open up for editing along with SAVE and CLOSE option. Notes are also listed in  </span><span class="bold">List of Bookmarks/Notes.  </span><span>After saving note, the word selected is highlighted. (Note option is third from left in the pop up)   </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/speechnotes.PNG" /></td>
                  <td class="content"><span>With the  </span><span class="bold">Highlighter  </span><span>tool, you can highlight words in a page. Select the word to be highlighted. A pop up would emerge. Click on any of the two highlight icon to activate this tool. The highlights are prioritized as &apos;Important Highlight&apos; with Red color and differentiated from &apos;Normal Highlights&apos; with Yellow in color. (Highlight options are 1st and 2nd from left in the pop up)  </span></td>
                </tr>
                <tr >
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/resources1.png" /></td>
                  <td class="content"><span>With the<span class="bold"> Page Level Resources   </span>option, you can access resources (Audio, Video and  present on the current page. Click on the icon, a result drop down emerges, displaying links for the resources on the page. Click on the link to view/play the resources.  </span></td>
                </tr>
                <tr >
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/bookmark.png" /></td>
                  <td class="content"><span> A<span class="bold"> bookmark   </span>allows you to save the page for future reference. You can save the page with custom name. The Bookmarked page is also saved in the<span class="bold"> List of Bookmarks/Notes.  </span>  </span></td>
                </tr>
                <tr >
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/print.png" /></td>
                  <td class="content"><span>The  </span><span class="bold">Print  </span><span>button displays the &apos;print view&apos; of the page.  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/stickynotes.png" /></td>
                  <td class="content"><span>The<span class="bold"> List Bookmarks/Notes   </span>button allows user to view the Notes and Bookmarks present in the book.   </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/help.png" /></td>
                  <td class="content"><span class="bold">The Help  </span><span>button will open Help document on a click  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/settings.png" /></td>
                  <td class="content"><span>The  </span><span class="bold">Settings  </span><span>button will allow you to set value for Note color.  </span></td>
                </tr>
                <tr>
                  <td class="img"><img ng-src="themes/{{CONFIG.theme}}/images/help/logout.png" /></td>
                  <td class="content"><span>The  </span><span class="bold">Logout   </span>button will allow you to log you out the book.  </span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="control-group" style='height:50px;'></div>
  </div>
</div>