<div class="toast">
  <!-- 상단바 -->
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <div class="translucent" />
      <div class="navbar-brand"><span /></div>
      <!-- 스마트폰 모드 -->
      <div class="btn-toolbar btn-small-toolbar">
        <div class="btn-group pull-left" role="group">
          <button command="mystorage" type="button" class="btn" title="{{Strings.MY_STORAGE}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/my-storage.svg">
            <div class="label label-default">{{Strings.MY_STORAGE}}</div>
          </button>
          <button command="toc" type="button" class="btn" title="{{Strings.TOC}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/toc.svg">
            <div class="label label-default">{{Strings.TOC}}</div>
          </button>
        </div>
        <div class="btn-group pull-right" role="group">
          <button command="search" type="button" class="btn" title="{{Strings.SEARCH}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/search.svg">
            <div class="label label-default">{{Strings.SEARCH}}</div>
          </button>
          <button command="toggleBookmark" type="button" class="btn" title="{{Strings.BOOKMARK}}">
            <img class="icon svg-icon off" src="{{theme.baseURL}}icons/bookmark.svg">
            <img class="icon svg-icon on" src="{{theme.baseURL}}icons/bookmark-on.svg">
            <div class="label label-default">{{Strings.BOOKMARK}}</div>
          </button>
        </div>
      </div><!--// 스마트폰 모드 -->
      
      <!-- 데스크탑 & 태블릿 모드 -->
      <div class="btn-toolbar">
        <div class="btn-group" role="group">
          <button command="mystorage" type="button" class="btn" title="{{Strings.MY_STORAGE}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/my-storage.svg">
            <div class="label label-default">{{Strings.MY_STORAGE}}</div>
          </button>
          <button command="toc" type="button" class="btn" title="{{Strings.TOC}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/toc.svg">
            <div class="label label-default">{{Strings.TOC}}</div>
          </button>
          <button command="fullscreen" type="button" class="btn" title="{{Strings.FULL_SCREEN}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/fullscreen.svg">
            <div class="label label-default">{{Strings.FULL_SCREEN}}</div>
          </button>
          <button command="toggleZoom" type="button" class="btn" title="{{Strings.ZOOM_IN_OUT}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/toggle-zoom.svg">
            <div class="label label-default">{{Strings.ZOOM_IN_OUT}}</div>
          </button>
          <button command="print" type="button" class="btn" title="{{Strings.PRINT}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/print.svg">
            <div class="label label-default">{{Strings.PRINT}}</div>
          </button>
          <button command="share" type="button" class="btn" title="{{Strings.SHARE}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/share.svg">
            <div class="label label-default">{{Strings.SHARE}}</div>
          </button>
          <button command="search" type="button" class="btn" title="{{Strings.SEARCH}}">
            <img class="icon svg-icon" src="{{theme.baseURL}}icons/search.svg">
            <div class="label label-default">{{Strings.SEARCH}}</div>
          </button>
          <button command="toggleBookmark" type="button" class="btn" title="{{Strings.BOOKMARK}}">
            <img class="icon svg-icon off" src="{{theme.baseURL}}icons/bookmark.svg">
            <img class="icon svg-icon on" src="{{theme.baseURL}}icons/bookmark-on.svg">
            <div class="label label-default">{{Strings.BOOKMARK}}</div>
          </button>
        </div>
      </div><!--// 데스크탑 모드 -->

    </div><!--// container-fluid -->
  </nav>
  
  <!-- 북 컨테이너 -->
  <div class="book-container">
    <!-- 북 배경 -->
    <div class="book-bg" data-offset-left="25" data-offset-right="25" data-offset-top="10" data-offset-bottom="10">
      <div class="book-bg-page"></div>
      <div class="book-bg-page"></div>
      <div class="book-bg-page"></div>
    </div><!--// 북 배경 -->
    <!-- 북 -->
    <div class="book"></div>
  </div><!--// 북 컨테이너 -->

  <!-- 하단 바 -->
  <aside class="controlbar" role="toolbar">
    <div class="translucent" />
    <div class="btn-toolbar">
      <div class="btn-group navigate" role="group">
        <button command="firstPage" type="button" class="btn" title="{{Strings.FIRST_PAGE}}">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/first.svg">
        </button>
        <button command="previousPage" type="button" class="btn" title="{{Strings.PREVIOUS_PAGE}}">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/previous.svg">
        </button>
        <button command="moveToUserInputPage" type="button" class="btn btn-pagelabel" title="{{Strings.CURRENT_PAGE}}">
          <div class="label-group">
            <span class="label-page"></span>
            <input type="text" class="form-control input-page">
          </div>
        </button>
        <button command="nextPage" type="button" class="btn" title="{{Strings.NEXT_PAGE}}">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/next.svg">
        </button>
        <button command="lastPage" type="button" class="btn" title="{{Strings.LAST_PAGE}}">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/last.svg">
        </button>
      </div>
      <div class="btn-group pull-right" role="group">
        <button command="thumbnail" type="button" class="btn" title="{{Strings.THUMBNAIL}}">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/thumbnail.svg">
        </button>
        <button command="toggleDoublePage" type="button" class="btn" title="{{Strings.TOGGLE_DOUBLE_PAGE}}">
          <img class="icon svg-icon off" src="{{theme.baseURL}}icons/single-page.svg">
          <img class="icon svg-icon on" src="{{theme.baseURL}}icons/double-page.svg">
        </button>
      </div>
    </div>
  </aside><!--// 하단 바 -->
  
  <!-- 사이드 페이지 네비게이트 버튼 -->
  <div class="side-page-navigate-buttons">
    <button class="btn btn-side-previous-page" command="previousPage" title="{{Strings.PREVIOUS_PAGE}}">
      <img class="icon svg-icon" src="{{theme.baseURL}}icons/side_previous.svg">
    </button>
    <button class="btn btn-side-next-page" command="nextPage" title="{{Strings.NEXT_PAGE}}">
      <img class="icon svg-icon" src="{{theme.baseURL}}icons/side_next.svg">
    </button>
  </div><!--// 사이드 페이지 네비게이트 버튼 -->
  
  <!-- 시작메뉴 -->
  <div class="start-menu animate-start-menu dropdown dropup enabled">
    <button command="startmenu" type="button" class="btn start-menu-toggle dropdown-toggle" data-toggle="dropdown"  title="{{Strings.STARTMENU}}">
      <img class="icon svg-icon mobile portrait" src="{{theme.baseURL}}icons/start-menu-circle.svg">
      <img class="icon svg-icon desktop mobile landscape" src="{{theme.baseURL}}icons/start-menu.svg">
    </button>
    <span class="start-menu-arrow"></span>

    <ul class="dropdown-menu auto-scrollbar" role="menu">
      <li command="mystorage" title="{{Strings.MY_STORAGE}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/my-storage.svg">
          <span class="menu-title">{{Strings.MY_STORAGE}}</span>
        </div>
      </li>
      <li command="toc" title="{{Strings.TOC}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/toc.svg">
          <span class="menu-title">{{Strings.TOC}}</span>
        </div>
      </li>
      <li command="fullscreen" title="{{Strings.FULL_SCREEN}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/fullscreen.svg">
          <span class="menu-title">{{Strings.FULL_SCREEN}}</span>
        </div>
      </li>
      <li command="toggleZoom" title="{{Strings.ZOOM_IN_OUT}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/toggle-zoom.svg">
          <span class="menu-title">{{Strings.ZOOM_IN_OUT}}</span>
        </div>
      </li>
      <li command="addmemo" title="{{Strings.MEMO}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/memo.svg">
          <span class="menu-title">{{Strings.MEMO}}</span>
        </div>
      </li>
      <li command="search" title="{{Strings.SEARCH}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/search.svg">
          <span class="menu-title">{{Strings.SEARCH}}</span>
        </div>
      </li>
      <li command="toggleBookmark" title="{{Strings.BOOKMARK}}">
        <div class="box">
          <img class="icon svg-icon off" src="{{theme.baseURL}}icons/bookmark.svg">
          <img class="icon svg-icon on" src="{{theme.baseURL}}icons/bookmark-on.svg">
          <span class="menu-title">{{Strings.BOOKMARK}}</span>
        </div>
      </li>
      <li command="thumbnail" title="{{Strings.THUMBNAIL}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/thumbnail.svg">
          <span class="menu-title">{{Strings.THUMBNAIL}}</span>
        </div>
      </li>
      <li command="toggleDoublePage" title="{{Strings.DOUBLE_PAGE}}">
        <div class="box">
          <img class="icon svg-icon off" src="{{theme.baseURL}}icons/single-page.svg">
          <img class="icon svg-icon on" src="{{theme.baseURL}}icons/double-page.svg">
          <span class="menu-title">{{Strings.DOUBLE_PAGE}}</span>
        </div>
      </li>
      
      <li command="moveToUserInputPage" title="{{Strings.GO_TO_PAGE}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/go-to-page.svg">
          <span class="menu-title">{{Strings.GO_TO_PAGE}}</span>
        </div>
      </li>
      
      <li command="toggleAutoSlide" title="{{Strings.SLIDESHOW}}">
        <div class="box">
          <img class="icon svg-icon off" src="{{theme.baseURL}}icons/play.svg">
          <canvas class="icon autoslide on" data-thickness="2" data-background-color="rgba( 255, 255, 255, 0.0 )" data-stroke-color="#ddd" data-fill-stroke-color="#3f3f3f">
          </canvas>
          <span class="menu-title off">{{Strings.START_SLIDESHOW}}</span>
          <span class="menu-title on">{{Strings.STOP_SLIDESHOW}}</span>
        </div>
      </li>

      <li command="toggleBgSound" title="{{Strings.BACKGROUND_MUSIC}}">
        <div class="box">
          <img class="icon svg-icon off" src="{{theme.baseURL}}icons/volume-on.svg">
          <img class="icon svg-icon on" src="{{theme.baseURL}}icons/volume-off.svg">
          <span class="menu-title off">{{Strings.PLAY_BACKGROUND_MUSIC}}</span>
          <span class="menu-title on">{{Strings.STOP_BACKGROUND_MUSIC}}</span>
        </div>
      </li>
      
      <li command="print" title="{{Strings.PRINT}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/print.svg">
          <span class="menu-title">{{Strings.PRINT}}</span>
        </div>
      </li>

      <li command="share" title="{{Strings.SHARE}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/share.svg">
          <span class="menu-title">{{Strings.SHARE}}</span>
        </div>
      </li>

      <li command="pdfDownload" title="{{Strings.PDF_DOWNLOAD}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/pdf.svg">
          <span class="menu-title">{{Strings.PDF_DOWNLOAD}}</span>
        </div>
      </li>

      <li command="settings" title="{{Strings.SETTINGS}}">
        <div class="box">
          <img class="icon svg-icon" src="{{theme.baseURL}}icons/settings.svg">
          <span class="menu-title">{{Strings.SETTINGS}}</span>
        </div>
      </li>
      
    </ul>
  </div><!--// 시작메뉴 -->
  
</div>