Merge branch 'master' into burgermenu

# Conflicts:
#	js/libs/fluidbook/fluidbook.nav.js
#	style/fluidbook.less

diff --cc _index.html
Simple merge

diff --cc js/libs/fluidbook/fluidbook.js
index f5af00180db6525f26514d934935bf9bb57193e1,10d8cf9e8d6754e83748f7d3a7d4dd328c198a8c..7b46c347681e49ede9685816040c02354373a752
--- 1/js/libs/fluidbook/fluidbook.js
--- 2/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@@ -711,61 -710,13 +711,65 @@@ Fluidbook.prototype = 
          return this.datas.numerotation[page - 1];
      },
      virtualToPhysical: function (page) {
-         return this.datas.numerotation.indexOf(page) + 1;
+         var i=this.datas.numerotation.indexOf(page);
+         if(i==-1){
+             return false;
+         }
+         return i + 1;
      },
  
 +    hideMenuItems: function (exception) {
 +        exception = exception || '';
 +        $('#menuList > ul > li').not(exception).fadeOut(100);
 +    },
 +
 +    showMenuItems: function (exception) {
 +        exception = exception || '';
 +        $('#menuList > ul > li').not(exception).fadeIn(300);
 +    },
 +
 +    initSearchResults: function () {
 +        this.menuSearchResults = $('#menuSearchResults');
 +        this.resizeSearchResults();
 +        this.menuSearchResults.hide();
 +    },
 +
 +    resizeSearchResults: function () {
 +
 +        //console.warn('calling resizeSR');
 +        //console.log('menu open?', this.nav.menuIsOpen);
 +
 +        if (!fluidbook.nav.menuIsOpen) return false;
 +
 +        var wh = $(window).height(),
 +            formHeight = $('#searchForm').height();
 +            marginTop = marginBottom = 50,
 +            maxHeight = wh - formHeight - marginTop - marginBottom;
 +
 +        // Search results element may not exist when resize is called
 +        if (fluidbook.menuSearchResults == undefined) {
 +            fluidbook.initSearchResults();
 +            return false; // initSearchResults will call this resize function anyway
 +        }
 +
 +        // Set max-height for search results section (using CSS vh units was unreliable)
 +        fluidbook.menuSearchResults.css('maxHeight', maxHeight);
 +        fluidbook.menuSearchResults.perfectScrollbar('update');
 +    },
 +
 +    initSearchHints: function () {
 +
 +        this.menuSearchHints = $('#menuSearchHints');
 +        this.hideMenuItems('#menuSearch'); // Hide everything except the search form so we can have space for the hints
 +
 +        this.menuSearchHints.fadeIn(300);
 +
 +        this.initSearchResults();
 +
 +        // if (this.menuSearchHints.hasClass('mm-hidden')) {
 +        //     this.nav.menuAPI.openPanel(this.menuSearchHints, false);
 +        // }
 +    },
      getSearchHints: function (q) {
  
          var $this = this;

diff --cc js/libs/fluidbook/fluidbook.menu.js
Simple merge

diff --cc js/libs/fluidbook/fluidbook.nav.js
index b9cdbb6b3225e0bb999eadf2767401617edce4bc,1792d367daab8bb96c3fcb2504bc2ef27cc3214c..90f6c2ac340409e0a6e66e62f21eae5dc3e8cda0
--- 1/js/libs/fluidbook/fluidbook.nav.js
--- 2/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@@ -10,86 -7,32 +10,88 @@@ function FluidbookNav(fluidbook) 
  }
  
  FluidbookNav.prototype = {
 -    getIcon: function (name) {
 -        var src = 'data/images/' + name + '.';
 -        if (this.fluidbook.support.SVG) {
 -            src += 'svg';
 -        } else {
 -            src += 'png';
 -        }
 -        if (this._dimensions[name] == undefined) {
 -            return '';
 -        }
 -        return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]);
 +    initMenu: function () {
 +        var $this = this;
 +
 +        this.menu.mmenu({
 +
 +            // Allow #anchor links to trigger correctly and close the menu
 +            // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172
 +            onClick: {
 +                preventDefault: function() {
 +                    $this.menuAPI.close();
 +                }
 +            },
 +
 +            "extensions": [
 +                "pagedim-black"
 +            ],
 +            "offCanvas": {
 +                "position": "right",
 +                "zposition": "front"
 +            },
 +            "navbar": {
 +                //add: false // Removes main title bars completely
 +                title: "" // Hides the default "Menu" text
 +            }
 +        });
 +
 +        this.menuAPI = this.menu.data('mmenu');
 +
 +        // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4)
 +        this.menuAPI.bind("open:finish", function () {
 +            $('body').addClass('menu-open');
 +            $this.menuIsOpen = true;
 +
 +            $('#q').focus();
 +        });
 +
 +        this.menuAPI.bind("close:finish", function () {
 +            $('body').removeClass('menu-open');
 +            $this.menuIsOpen = false;
 +        });
 +
 +
 +        $(document).on('click', '#menuOpener', function (e) {
 +            e.preventDefault();
 +            $this.menuAPI.open();
 +        });
 +
 +        // Close menu when a search result is clicked
 +        $(document).on('click', '#menuSearchResults a', function (e) {
 +            $this.menuAPI.close();
 +        });
 +
 +        // Recalculate available size for menu search results
 +        $(window).on('fluidbookresize', fluidbook.resizeSearchResults);
 +
      },
 -    addLink: function (name, href, id, help, before, c) {
 -        if ($("#nav").find('#' + id).length > 0) {
 +    // getIcon: function (name) {
 +    //     var src = 'data/images/' + name + '.';
 +    //     if (this.fluidbook.support.SVG) {
 +    //         src += 'svg';
 +    //     } else {
 +    //         src += 'png';
 +    //     }
 +    //     if (this._dimensions[name] == undefined) {
 +    //         return '';
 +    //     }
 +    //     return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]);
 +    // },
 +    addLink: function (name, href, id, title, help, before, c) {
 +        if (this.menu.find('#' + id).length > 0) {
              return;
          }
-         var l = '<li>' + this.getLink(name, href, id, title, help, c) + '</li>';
 -        var l = $(this.getLink(name, href, id, help, c));
++        var l = $(this.getLink(name, href, id, title, help, c)),
++            li = '<li>' + l[0].outerHTML + '</li>';
          if (before == undefined) {
-             this.menu.find('ul').append(l);
 -            $("#nav").append(l);
++            this.menu.find('ul').append(li);
          } else {
-             this.menu.find("ul #" + before).before(l);
 -            $("#nav #" + before).before(l);
++            this.menu.find("ul #" + before).before(li);
          }
+         return l;
      },
 -
 -    getLink: function (name, href, id, help, className, icon) {
 +    getLink: function (name, href, id, title, help, className, icon) {
          if (icon == undefined) {
              icon = true;
          }
@@@ -107,19 -48,10 +109,19 @@@
          }
          res += '>';
          if (icon) {
 -            res += this.getIcon(name);
 +            res += getSpriteIcon(name);
 +        }
 +
-         if (help != undefined && help != '') {
++        if (title != undefined && title != '') {
 +            res += ' ' + this.fluidbook.l10n.__(title);
 +        }
 +
 +        // If there's no link defined, return the text an icon wrapped in a <span> (useful for MMenu)
 +        if (href == '') {
 +            return '<span' + res + '</span>';
 +        } else {
 +            return '<a href="' + href + '"' + res + '</a>';
          }
 -        res += '</a>';
 -        return res;
      },
      setNav: function () {
          if (this._inited == true) {
@@@ -173,7 -103,7 +183,7 @@@
                  }
                  try {
                      if (homeURL != '') {
-                         this.addLink('nav-home', homeURL, 'home', 'home', 'home');
 -                        link = this.addLink('nav-home', homeURL, 'home', 'home');
++                        link = this.addLink('nav-home', homeURL, 'home', 'home', 'home');
                      }
                  } catch (err) {
  
@@@ -188,71 -118,29 +198,71 @@@
                      return false;
                  })
              } else if (icon == 'index') {
-                 this.addLink('interface-index', '#/index', 'index', 'overview', 'overview');
 -                link = this.addLink('nav-index', '#/index', 'index', 'overview');
++                link = this.addLink('interface-index', '#/index', 'index', 'overview', 'overview');
              } else if (icon == 'chapters') {
                  if (this.fluidbook.datas.displayChaptersIcon) {
                      if (this.fluidbook.datas.chaptersPage != '') {
-                         this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters');
 -                        link = this.addLink('nav-sommaire', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters');
++                        link = this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters');
                      } else if (this.fluidbook.datas.chapters.length > 0) {
 -                        link = this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters');
 +                        // this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters');
-                         this.addLink('interface-chapters', '', 'chapters', 'chapters', 'chapters');
++                        link = this.addLink('interface-chapters', '', 'chapters', 'chapters', 'chapters');
 +
 +                        // Get HTML for submenus (appended later)
 +                        this.chaptersMenuHTML = this.makeChapterLists(this.fluidbook.datas.chapters);
                      }
                  }
 +
 +            // Sharing icons - this may contain many different icons
              } else if (icon == 'friend') {
 -                if (this.fluidbook.datas.share) {
 -                    link = this.addLink('nav-friend', '#/share', 'share', 'share');
 -                    $("#share").click(function () {
 -                        if ($this.fluidbook.datas.phonegap != 'android') {
 -                            return true;
 -                        }
 -                        $this.fluidbook.intentShare();
 -                        return false;
 -                    });
 +                // if (this.fluidbook.datas.share) {
-                 //     this.addLink('nav-friend', '#/share', 'share', 'share');
++                //     link = this.addLink('nav-friend', '#/share', 'share', 'share');
 +                //     $("#share").click(function () {
 +                //         if ($this.fluidbook.datas.phonegap != 'android') {
 +                //             return true;
 +                //         }
 +                //         $this.fluidbook.intentShare();
 +                //         return false;
 +                //     });
 +                // }
 +
 +                var shareLinks = {},
 +                    shareHTML = '';
 +
 +                if (this.fluidbook.datas.friend) {
 +                    shareLinks['email'] = 'E-mail';
 +                }
 +                if (this.fluidbook.datas.facebook) {
 +                    shareLinks['facebook'] = 'Facebook';
 +                }
 +                if (this.fluidbook.datas.twitter) {
 +                    shareLinks['twitter'] = 'Twitter';
 +                }
 +                if (this.fluidbook.datas.googleplus) {
 +                    shareLinks['googleplus'] = 'Google Plus';
                  }
 +                if (this.fluidbook.datas.linkedin) {
 +                    shareLinks['linkedin'] = 'LinkedIn';
 +                }
 +                if (this.fluidbook.datas.viadeo) {
 +                    shareLinks['viadeo'] = 'Viadeo';
 +                }
 +
 +                // Generate links
 +                for (var shareType in shareLinks) {
 +                    if (shareLinks.hasOwnProperty(shareType)) { // Ensure we don't get inherited properties
 +                        shareHTML += '<a href="#" data-service="'+ shareType +'" class="share" title="'+ shareLinks[shareType] +'">';
 +                        shareHTML += '<img src="data/images/share-'+ shareType +'.svg" />';
 +                        shareHTML += '</a>';
 +                    }
 +                }
 +
 +                // Append to menu
 +                this.menu.find('ul').append('<li id="shareLinks"><div class="mm-nopanel share-icons">'+ shareHTML +'</div></li>');
 +
 +
              } else if (icon == 'bookmark') {
                  if (this.fluidbook.datas.bookmark) {
-                     this.addLink('interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks');
 -                    link = this.addLink('nav-bookmark', '#/bookmark', 'bookmarks', 'bookmarks');
++                    link = this.addLink('interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks');
                      $("#bookmarks").click(function () {
                          if (!$this.fluidbook.bookmarks.hasBookmarkedPages()) {
                              var message = $this.fluidbook.l10n.__("you don't have any bookmarks");
@@@ -266,17 -154,9 +276,17 @@@
                          }
                      });
                  }
 -            } else if (icon == 'pdf' || icon == 'print') {
 -                if ($("#print").length == 0 && (this.fluidbook.datas.print || this.fluidbook.datas.pdf)) {
 -                    link = this.addLink('nav-print', '#', 'print', '!' + this.fluidbook.l10n.__('print') + ' | ' + this.fluidbook.l10n.__('download pdf'));
 +            } else if (icon == 'pdf') {
 +                if ($("#download").length == 0 && this.fluidbook.datas.pdf) {
-                     this.addLink('interface-download', '#', 'download', 'download', 'download');
++                    link = this.addLink('interface-download', '#', 'download', 'download', 'download');
 +                    $("#download").on('click', function () {
 +                        $this.fluidbook.print();
 +                        return false;
 +                    });
 +                }
 +            } else if (icon == 'print') {
 +                if ($("#print").length == 0 && this.fluidbook.datas.print) {
-                     this.addLink('interface-print', '#', 'print', 'print', 'print');
++                    link = this.addLink('interface-print', '#', 'print', 'print', 'print');
                      $("#print").on('click', function () {
                          $this.fluidbook.print();
                          return false;
@@@ -288,15 -168,15 +298,15 @@@
                  }
              } else if (icon == 'archives') {
                  if (this.fluidbook.datas.archivesLink != '') {
-                     this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
 -                    link = this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel);
++                    link = this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
                  } else if (this.fluidbook.datas.externalArchives != '') {
-                     this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
 -                    link = this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel);
++                    link = this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
                  }
              } else if (icon == 'help') {
-                 this.addLink('interface-help', '#', 'help', 'help', 'help');
 -                link = this.addLink('nav-help', '#', 'help', '');
++                link = this.addLink('interface-help', '#', 'help', 'help', 'help');
              } else if (icon == 'zoom' && !this.fluidbook.support.isMobile) {
-                 this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in');
-                 this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out');
 -                link = this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in');
 -                link = this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out');
++                link = this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in');
++                link = this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out');
  
                  $("#zoomin").click(function (e) {
                      $this.fluidbook.desktop.clickZoom(e, 'in');
@@@ -308,18 -188,21 +318,22 @@@
                      return false;
                  });
              } else if (icon == 'fullscreen' && Modernizr.fullscreen && !DATAS.phonegap) {
-                 this.addLink('interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal');
 -                link = this.addLink('nav-fullscreen', '#', 'fullscreen', 'switch between fullscreen and normal');
++                link = this.addLink('interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal');
                  $("#fullscreen").click(function () {
 +                    $this.menuAPI.close();
                      screenfull.toggle();
                      return false;
                  })
              }
+ 
+             if (!visible) {
+                 $(link).addClass('hidden');
+             }
          }
  
 -        if (this.fluidbook.datas.search) {
 -            this.setSearch();
 -        }
 +        // if (this.fluidbook.datas.search) {
 +        //     this.setSearch();
 +        // }
          if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.themeEnableAfterSearch) {
              this.setAfterSearch();
          }
@@@ -370,34 -216,12 +384,36 @@@
              return;
          }
  
 -        $("#nav").append(l);
 -        $("#nav #locales").css('background-image', 'url("images/flags/' + flag + '.png")');
 +        this.menu.append(l);
 +        this.menu.find("#locales").css('background-image', 'url("images/flags/' + flag + '.png")');
+ 
+         return l;
      },
 -    setSearch: function () {
 +
 +    getMenuCloseButton: function () {
 +        var $this = this,
 +            buttonID = 'menuClose';
 +
 +        // Click handler to close menu
 +        $(document).on('click', '#' + buttonID, function(e) {
 +
 +            e.preventDefault();
 +
 +            // If the search is active, the close button should clear the search
 +            // and return the user to the main menu instead of closing the menu
 +            if ($this.fluidbook.isSearchActive()) {
 +                $this.fluidbook.closeSearch();
 +            } else {
 +                $this.menuAPI.close();
 +            }
 +
 +
 +        });
 +
 +        return '<a href="#" id="'+ buttonID +'">'+ getSpriteIcon('interface-close') +'</a>';
 +    },
 +
 +    getSearch: function () {
          var $this = this;
          var res = '<form action="#" id="searchForm" method="post">';
          res += '<input type="text" id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
@@@ -570,43 -269,6 +586,44 @@@
          $('#interface').append(res);
          $(document).on('click', '#next', goNextPage);
          $(document).on('click', '#previous', goPreviousPage);
 +    },
 +
 +    // Build nested lists from chapters
 +    makeChapterLists: function (chapters) {
 +
 +        var currentLevel = 0,
 +            loopIndex = 0,
 +            html = '<ul id="chapterList">';
 +
 +        // Loop through all chapters and build new ULs based on level/depth
 +        chapters.forEach(function(chapter) {
 +            loopIndex++;
 +
 +            if (chapter.level > currentLevel) {
 +                html += '<ul>'; // Going one level deeper, start new list
 +                                // It's assumed that consecutive items will never be more than 1 level deeper than the previous
 +            } else if (chapter.level < currentLevel) {
 +                var levelDifference = currentLevel - chapter.level;
 +                // We need to close a list for every level change (eg. jumping from level 5 back to level 2)
 +                for (var i = 0; i < levelDifference; i++) {
 +                    html += '</li></ul></li>'; // Going one level higher, end previous list
 +                }
 +            } else {
 +                if (loopIndex > 1) { // On the first run through, there's nothing to close
 +                    html += '</li>'; // Same level so close off current item
 +                }
 +            }
 +
 +            currentLevel = chapter.level;
 +
 +            var page = (this.fluidbook.virtualToPhysical(chapter.page));
 +
 +            html += '<li><a href="#/page/' + page + '" class="level-' + chapter.level + '">' + chapter.label + '</a>';
 +        });
 +
 +        html += '</li></ul>';
 +
 +        return html;
      }
- };
+ };
+ 

diff --cc js/libs/fluidbook/fluidbook.utils.js
Simple merge

diff --cc js/main.js
Simple merge

diff --cc style/fluidbook.less
index ab1e0ebcc7b63bbde0761e2e9a69dc7519e8d3c8,ed549d742c85c62274742f5f7e197e6f4af554ef..9e54227e8414efcf1cbf0a706361ca7852fa663b
--- 1/style/fluidbook.less
--- 2/style/fluidbook.less
+++ b/style/fluidbook.less
@@@ -315,8 -319,8 +319,8 @@@ body, html 
        display: none;
  }
  
--/* Nav */
 -#nav #locales {
++/* Nav */  // #nav ?
 +#menu #locales {
        display: inline-block;
        width: 22px;
        height: 17px;
@@@ -971,92 -1029,119 +1029,121 @@@ form input[type="text"], form input[typ
                }
        }
  
-       .doubleThumb {
-               height: @thumb-height;
-               &.left {
-                       margin-right: 10px;
+ }
+ 
+ .doubleThumb {
+       height: @thumb-height;
+       &.left {
+               margin-right: 10px;
+       }
+       &.simple {
+               .overlay {
+                       width: 100px;
                }
-               &.simple {
-                       .overlay {
-                               width: 100px;
-                       }
-                       &.left {
-                               .hits {
-                                       left: -50px;
-                               }
-                       }
-                       &.right {
-                               .hits {
-                                       left: 50px;
-                               }
+               &.left {
+                       .hits {
+                               left: -50px;
                        }
- 
                }
-               .overlay {
-                       background-color: rgba(0, 0, 0, 0.5);
-                       position: absolute;
-                       top: 0px;
-                       left: 0px;
-                       width: 200px;
-                       z-index: 4;
+               &.right {
+                       .hits {
+                               left: 50px;
+                       }
                }
+       }
  
-               @hits-top: (@thumb-height - 26) / 2;
+       .overlay {
+               background-color: rgba(0, 0, 0, 0.5);
+               position: absolute;
+               top: 0px;
+               left: 0px;
+               width: 200px;
+               z-index: 4;
+       }
  
-               .hits {
-                       position: relative;
-                       display: inline;
+       @hits-top: (@thumb-height - 26) / 2;
  
-                       z-index: 5;
-                       font-size: 12px;
-                       height: 26px;
-                       top: @hits-top;
-                       &.yes {
-                               padding: 5px;
-                               border-radius: 1px;
-                               color: @menu-text;
-                               background-color: @menu-background;
-                       }
+       .hits {
+               position: relative;
+               display: inline;
+ 
+               z-index: 5;
+               font-size: 12px;
+               height: 26px;
+               top: @hits-top;
+               &.yes {
+                       padding: 5px;
+                       border-radius: 1px;
+                       color: @menu-text;
+                       background-color: @menu-background;
                }
        }
+ }
  
-       .padding {
-               height: 1px;
+ .padding {
+       height: 1px;
+ }
+ 
+ .thumb {
+       position: absolute;
+       top: 0px;
+       left: 0px;
 -      font-size: 12px;
+ 
+       .bookmark {
+               width: 35px;
+               height: 35px;
+               z-index: 2;
        }
  
-       .thumb {
-               position: absolute;
-               top: 0px;
-               left: 0px;
-               img {
-                       width: 100px;
-                       height: @thumb-height;
-                       background: #fff
-               }
-               .number {
-                       text-align: center;
-                       display: block;
-                       margin: 0;
-                       padding: 5px 0 0 0;
-                       max-width: 100px;
-                       font-size: 14px;
-                       font-weight: bold;
-                       line-height: 1;
-               }
+       .img {
+               width: 100px;
+               height: @thumb-height;
+               background-color: transparent;
+               position: relative;
+               z-index: 1;
+               background-blend-mode: normal, overlay;
+               background-repeat: no-repeat;
+       }
+       .number {
+               text-align: center;
+               display: block;
 -              font-family: Arial, Helvetica, sans-serif;
 -              margin: 5px 0 0 0;
++        margin: 0;
++              padding: 5px 0 0 0;
+               max-width: 100px;
+               position: relative;
+               z-index: 1;
++        font-size: 14px;
++        font-weight: bold;
++        line-height: 1;
+       }
+       &.right {
+               left: 100px;
+       }
+       &.simple {
+               width: 100px;
                &.right {
-                       left: 100px;
-               }
-               &.simple {
-                       width: 100px;
-                       &.right {
-                               margin-left: 110px;
-                       }
-               }
-               &.left {
-                       margin-right: 110px;
+                       margin-left: 110px;
                }
+       }
+       &.left {
+               margin-right: 110px;
+       }
  
+       @shade-height: unit(@thumb-height+22, px);
+       &:before {
+               position: absolute;
+               content: "";
+               background-image: url("../images/icon-shad.png");
+               background-size: 100% 100%;
+               background-repeat: no-repeat;
+               opacity: 0.65;
+               top: -5px;
+               left: -5px;
+               width: 111px;
+               height: @shade-height;
+               z-index: 0;
        }
+ 
  }
  
  /* Search */