Chapter is quite ok

ajax loaded content
graphics ok
interactivity ok
remains the video interactions

.gitignore

@@ -6,4 +6,4 @@ sites/*/files
 sites/*/private
 
 *.sublime*
-.sass-cache
+sites/all/themes/gui/jee/.sass-cache

.htaccess

@@ -141,3 +141,5 @@ DirectoryIndex index.php index.html index.htm
     </FilesMatch>
   </IfModule>
 </IfModule>
+
+AddType application/x-web-app-manifest+json .webapp

sites/all/modules/gui/jeemod/jeemod.module

@@ -12,7 +12,7 @@ function jeemod_menu() {
   );
 
   $items['jee/chapter'] = $base+array(
-    'title' => 'Matrio base ajax',
+    'title' => 'jee',
     'page callback' => 'jeemod_chapter',
     'page arguments' => array(2),
     'access callback' => TRUE,

sites/all/themes/gui/jee/bower.json

@@ -3,7 +3,8 @@
   "dependencies": {
     "foundation": "~5.5.0",
     "jquery.transit": "~0.9.12",
-    "jquery.pep": "~0.6.3"
+    "jquery.pep": "~0.6.3",
+    "Peppermint": "~1.3.7"
   },
   "version": "7.x-0.1",
   "authors": [

sites/all/themes/gui/jee/bower_components/Peppermint/.bower.json

@@ -0,0 +1,42 @@
+{
+  "name": "Peppermint",
+  "version": "1.3.7",
+  "homepage": "http://wd.dizaina.net/en/scripts/peppermint/",
+  "authors": [
+    "Oleg Korsunsky <wd@dizaina.net>"
+  ],
+  "description": "Responsive touch-enabled slider. Tiny, supports mouse and all sorts of touch, library agnostic.",
+  "main": [
+    "dist/peppermint.min.js",
+    "dist/peppermint.suggested.css"
+  ],
+  "keywords": [
+    "touch",
+    "touch-events",
+    "pointer-events",
+    "mouse-events",
+    "slider",
+    "carousel",
+    "gallery",
+    "vanilla-js",
+    "framework-agnostic",
+    "library-agnostic"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test"
+  ],
+  "_release": "1.3.7",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.3.7",
+    "commit": "cec00832caa3a1940801a0b20f84c8b9c8518b1f"
+  },
+  "_source": "git://github.com/wilddeer/Peppermint.git",
+  "_target": "~1.3.7",
+  "_originalSource": "Peppermint",
+  "_direct": true
+}

sites/all/themes/gui/jee/bower_components/Peppermint/Gruntfile.js

@@ -0,0 +1,111 @@
+/*global module */
+module.exports = function(grunt) {
+    'use strict';
+
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        banner: '/*!\n * Peppermint touch slider\n * v. <%= pkg.version %> | <%= pkg.homepage %>\n * Copyright <%= pkg.author.name %> | <%= pkg.author.url %>\n *\n * Depends on Event Burrito (included) | https://github.com/wilddeer/Event-Burrito\n * MIT License\n */\n',
+        bannerPure: '/*!\n * Peppermint touch slider\n * v. <%= pkg.version %> | <%= pkg.homepage %>\n * Copyright <%= pkg.author.name %> | <%= pkg.author.url %>\n *\n * Depends on Event Burrito | https://github.com/wilddeer/Event-Burrito\n * MIT License\n */\n',
+        uglify: {
+            options: {
+                mangle: {
+                    except: ['Peppermint', '$', 'jQuery', 'EventBurrito']
+                }
+            },
+            peppermint: {
+                files: {
+                    'temp/peppermint.min.js': ['src/peppermint.js']
+                }
+            },
+            burrito: {
+                files: {
+                    'temp/eventburrito.min.js': ['src/burrito/eventburrito.js']
+                }
+            }
+        },
+
+        concat: {
+            options: {
+                banner: '<%= banner %>',
+                separator: '\n'
+            },
+            full: {
+                src: ['src/peppermint.js','src/burrito/eventburrito.js'],
+                dest: 'dist/peppermint.js',
+            },
+            min: {
+                src: ['temp/peppermint.min.js','temp/eventburrito.min.js'],
+                dest: 'dist/peppermint.min.js',
+            },
+            pureFull: {
+                options: {
+                    banner: '<%= bannerPure %>'
+                },
+                src: ['src/peppermint.js'],
+                dest: 'dist/pure/peppermint.pure.js'
+            },
+            pureMin: {
+                options: {
+                    banner: '<%= bannerPure %>'
+                },
+                src: ['temp/peppermint.min.js'],
+                dest: 'dist/pure/peppermint.pure.min.js'
+            },
+            cssRequired: {
+                options: {
+                    banner: '/* Peppermint minimal required styles */\n\n'
+                },
+                src: ['src/peppermint.required.css'],
+                dest: 'dist/peppermint.required.css'
+            },
+            cssSuggested: {
+                options: {
+                    banner: '/* Peppermint required styles + default appearance styles */\n\n',
+                    separator: '\n\n/* default appearance styles */\n'
+                },
+                src: ['src/peppermint.required.css', 'src/peppermint.appearance.css'],
+                dest: 'dist/peppermint.suggested.css'
+            }
+        },
+
+        bump: {
+            options: {
+                files: ['package.json', 'bower.json'],
+                updateConfigs: ['pkg'],
+                commit: true,
+                commitMessage: 'tagging v. %VERSION%',
+                commitFiles: ['.'],
+                createTag: true,
+                tagName: '%VERSION%',
+                tagMessage: 'tagging v. %VERSION%',
+                push: false
+            }
+        },
+
+        shell: {
+            push: {
+                command: 'git push'
+            },
+
+            pushTags: {
+                command: 'git push --tags'
+            }
+        },
+
+        watch: {
+            files: ['src/**/*.js', 'src/**/*.css', 'package.json'],
+            tasks: ['build']
+        },
+    });
+
+    // build
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-bump');
+    grunt.loadNpmTasks('grunt-shell');
+    grunt.registerTask('build', ['uglify', 'concat']);
+    grunt.registerTask('release', ['bump-only:patch', 'uglify', 'concat', 'bump-commit', 'shell:push', 'shell:pushTags']);
+    grunt.registerTask('w', ['build', 'watch']);
+    grunt.registerTask('default', 'build');
+};

sites/all/themes/gui/jee/bower_components/Peppermint/README.md

@@ -0,0 +1,224 @@
+#Peppermint touch slider
+
+[Check out the demo](http://wd.dizaina.net/en/scripts/peppermint/)
+
+Yet another touch slider. Only better.
+
+- Works with mouse, [Touch Events](http://www.w3.org/TR/touch-events/), [Pointer Events](http://www.w3.org/TR/pointerevents/), old [IE10 Pointer Events](http://msdn.microsoft.com/en-us/library/ie/hh673557\(v=vs.85\).aspx)
+- Responsive, works on iPhones, Androids, Windows Phones, Blackberries, Windows 8 devices
+- IE7+ compatible
+- Library agnostic. If jQuery is available, registers itself as a plugin.
+- Uses CSS3 transforms & animations, falls back to timer animations when necessary
+- Only 7.7 Kb minified
+- Perfomance-optimized `touch` functions
+- API and callback functions for extensibility
+- [Doesn't break](http://wd.dizaina.net/en/internet-maintenance/js-sliders-and-the-tab-key/) when <kbd>tab</kbd>&rsquo;bing
+
+##Kit
+
+- **[peppermint.min.js](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.min.js)** – minified production script
+- **[peppermint.required.css](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.required.css)** – styles required for proper functioning
+- **[peppermint.suggested.css](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.suggested.css)** – default styles to start with (required styles included)
+
+Also available in [Bower](http://bower.io):
+
+```
+bower install Peppermint --save
+```
+
+##Usage
+
+HTML markup:
+
+```html
+<div class="peppermint peppermint-inactive" id="peppermint">
+  <figure> ... </figure>
+
+  <figure> ... </figure>
+
+  <figure> ... </figure>
+</div>
+```
+
+Javascript:
+
+```javascript
+var slider = Peppermint(document.getElementById('peppermint'));
+```
+
+Or javascript + jQuery:
+
+```javascript
+$('.peppermint').Peppermint();
+```
+    
+`peppermint-inactive` class is not required. It is replaced with `peppermint-active` during setup.
+
+You are free to use any other tag instead of `figure`. When using `figure`, don't forget to include [html5shiv](https://github.com/aFarkas/html5shiv), otherwise it won't work in old IEs.
+
+Place anything you want within the slides.
+
+##Settings
+
+Peppermint can take settings object as an optional second parameter (first when using jQuery). Default settings:
+
+```javascript
+{
+  //transition time when changing slides, ms
+  speed: 300,
+
+  //transition time when changing slides after touch, ms
+  touchSpeed: 300,
+
+  //slideshow enabled
+  slideshow: false,
+
+  //slideshow interval, ms
+  slideshowInterval: 4000,
+
+  //stop slideshow after user interacts with the slider
+  stopSlideshowAfterInteraction: false,
+
+  //slide number to start with
+  startSlide: 0,
+
+  //use mouse to drag the slider
+  mouseDrag: true,
+
+  //don't initialize Peppermint if there's only one slide
+  disableIfOneSlide: true,
+
+  //Prefix to be used with Peppermint classes,
+  //such as `inactive`, `active`, `mouse`, `drag`, etc.
+  //Don't forget to change the stylesheet appropriately!
+  cssPrefix: 'peppermint-',
+
+  //show dots
+  dots: false,
+
+  //prepend dots to dotsContainer (default is append)
+  dotsPrepend: false,
+
+  //Element to contain dots, defaults to Peppermint's root element.
+  //Can be anywhere on the page.
+  dotsContainer: undefined,
+
+  //element containing slides, defaults to Peppermint's root element
+  slidesContainer: undefined,
+
+  //Callback function, runs at slide change.
+  //Receives slide number as a parameter.
+  onSlideChange: undefined,
+
+  //Callback function, runs at setup end.
+  //Receives total number of slides as a parameter.
+  onSetup: undefined
+}
+```
+
+####Examples
+
+JS:
+
+```javascript
+var slider = Peppermint(document.getElementById('peppermint'), {
+  dots: true,
+  slideshow: true,
+  speed: 500,
+  slideshowInterval: 5000,
+  stopSlideshowAfterInteraction: true,
+  onSetup: function(n) {
+    console.log('Peppermint setup done. Slides found: ' + n);
+  }
+});
+```
+
+JS + jQuery:
+
+```javascript
+$('.peppermint').Peppermint({
+  dots: true,
+  slideshow: true,
+  speed: 500,
+  slideshowInterval: 5000,
+  stopSlideshowAfterInteraction: true,
+  onSetup: function(n) {
+    console.log('Peppermint setup done. Slides found: ' + n);
+  }
+});
+```
+
+##API
+
+Peppermint exposes a set of functions upon installation. These functions can be used to controll the slider externally:
+
+`slideTo(n)` – change active slide to `n`;
+
+`next()` – next slide;
+
+`prev()` – previous slide;
+
+`start()` – start slideshow;
+
+`stop()` – stop slideshow;
+
+`pause()` – pause slideshow until the next slide change;
+
+`getCurrentPos()` – get current slide number;
+
+`getSlidesNumber()` – get total number of slides;
+
+`recalcWidth()` – recalculate slider's and slides' widths. Usefull when the container width is changed. Width recalculation runs automatically on window resize and device orientation change.
+
+####Examples
+
+JS:
+
+```javascript
+//init Peppermint and save the API object
+var slider = Peppermint(document.getElementById('peppermint')),
+    //save links to HTML nodes
+    rightArr = document.getElementById('right-arr'),
+    leftArr = document.getElementById('left-arr'),
+    getSlidesNumberButton = document.getElementById('getslidesnumber');
+
+//click `#right-arr` to go to the next slide
+rightArr.addEventListener('click', slider.next, false);
+
+//click `#left-arr` to go to the previous slide
+leftArr.addEventListener('click', slider.prev, false);
+
+//click `#getslidesnumber` to alert total number of slides
+getSlidesNumberButton.addEventListener('click', function() {
+  alert('There are ' + slider.getSlidesNumber() + ' slides');
+}, false);
+```
+
+JS + jQuery:
+
+```javascript
+//save jQuery link to slider's block
+var slider = $('#peppermint');
+
+//init Peppermint
+slider.Peppermint();
+
+//click `#right-arr` to go to the next slide
+$('#right-arr').click(slider.data('Peppermint').next);
+
+//click `#left-arr` to go to the previous slide
+$('#left-arr').click(slider.data('Peppermint').prev);
+
+//click `#getslidesnumber` to alert total number of slides
+$('#getslidesnumber').click(function() {
+    alert('There are ' + slider.data('Peppermint').getSlidesNumber() + ' slides');
+});
+```
+
+##Using Peppermint?
+
+Drop me a link &rarr; [:envelope: wd@dizaina.net](mailto:wd@dizaina.net).
+    
+##License
+
+[MIT license](http://opensource.org/licenses/MIT).

sites/all/themes/gui/jee/bower_components/Peppermint/bower.json

@@ -0,0 +1,32 @@
+{
+  "name": "Peppermint",
+  "version": "1.3.7",
+  "homepage": "http://wd.dizaina.net/en/scripts/peppermint/",
+  "authors": [
+    "Oleg Korsunsky <wd@dizaina.net>"
+  ],
+  "description": "Responsive touch-enabled slider. Tiny, supports mouse and all sorts of touch, library agnostic.",
+  "main": [
+    "dist/peppermint.min.js",
+    "dist/peppermint.suggested.css"
+  ],
+  "keywords": [
+    "touch",
+    "touch-events",
+    "pointer-events",
+    "mouse-events",
+    "slider",
+    "carousel",
+    "gallery",
+    "vanilla-js",
+    "framework-agnostic",
+    "library-agnostic"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test"
+  ]
+}

sites/all/themes/gui/jee/bower_components/Peppermint/dist/peppermint.js

@@ -0,0 +1,716 @@
+/*!
+ * Peppermint touch slider
+ * v. 1.3.7 | https://github.com/wilddeer/Peppermint
+ * Copyright Oleg Korsunsky | http://wd.dizaina.net/
+ *
+ * Depends on Event Burrito (included) | https://github.com/wilddeer/Event-Burrito
+ * MIT License
+ */
+function Peppermint(_this, options) {
+    var slider = {
+            slides: [],
+            dots: [],
+            left: 0
+        },
+        slidesNumber,
+        flickThreshold = 200, //Flick threshold (ms)
+        activeSlide = 0,
+        slideWidth,
+        dotBlock,
+        slideBlock,
+        slideshowTimeoutId,
+        slideshowActive,
+        animationTimer;
+
+    //default options
+    var o = {
+        speed: 300, //transition between slides in ms
+        touchSpeed: 300, //transition between slides in ms after touch
+        slideshow: false, //launch slideshow at start
+        slideshowInterval: 4000,
+        stopSlideshowAfterInteraction: false, //stop slideshow after user interaction
+        startSlide: 0, //first slide to show
+        mouseDrag: true, //enable mouse drag
+        disableIfOneSlide: true,
+        cssPrefix: 'peppermint-',
+        dots: false, //show dots
+        dotsPrepend: false, //dots before slides
+        dotsContainer: undefined,
+        slidesContainer: undefined,
+        onSlideChange: undefined, //slide change callback
+        onSetup: undefined //setup callback
+    };
+
+    //merge user options into defaults
+    options && mergeObjects(o, options);
+
+    var classes = {
+        inactive: o.cssPrefix + 'inactive',
+        active: o.cssPrefix + 'active',
+        mouse: o.cssPrefix + 'mouse',
+        drag: o.cssPrefix + 'drag',
+        slides: o.cssPrefix + 'slides',
+        dots: o.cssPrefix + 'dots',
+        activeDot: o.cssPrefix + 'active-dot',
+        mouseClicked: o.cssPrefix + 'mouse-clicked'
+    };
+
+    //feature detects
+    var support = {
+        transforms: testProp('transform'),
+        transitions: testProp('transition')
+    };
+
+    function mergeObjects(targetObj, sourceObject) {
+        for (var key in sourceObject) {
+            if (sourceObject.hasOwnProperty(key)) {
+                targetObj[key] = sourceObject[key];
+            }
+        }
+    }
+
+    function testProp(prop) {
+        var prefixes = ['Webkit', 'Moz', 'O', 'ms'],
+            block = document.createElement('div');
+
+        if (block.style[prop] !== undefined) return true;
+
+        prop = prop.charAt(0).toUpperCase() + prop.slice(1);
+        for (var i in prefixes) {
+            if (block.style[prefixes[i]+prop] !== undefined) return true;
+        }
+
+        return false;
+    }
+
+    function addClass(el, cl) {
+        if (!new RegExp('(\\s|^)'+cl+'(\\s|$)').test(el.className)) {
+            el.className += ' ' + cl;
+        }
+    }
+
+    function removeClass(el, cl) {
+        el.className = el.className.replace(new RegExp('(\\s+|^)'+cl+'(\\s+|$)', 'g'), ' ').replace(/^\s+|\s+$/g, '');
+    }
+
+    //n - slide number (starting from 0)
+    //speed - transition in ms, can be omitted
+    function changeActiveSlide(n, speed) {
+        if (n<0) {
+            n = 0;
+        }
+        else if (n>slidesNumber-1) {
+            n = slidesNumber-1;
+        }
+
+        //change active dot
+        for (var i = slider.dots.length - 1; i >= 0; i--) {
+            removeClass(slider.dots[i], classes.activeDot);
+        }
+
+        addClass(slider.dots[n], classes.activeDot);
+
+        activeSlide = n;
+
+        changePos(-n*slider.width, (speed===undefined?o.speed:speed));
+
+        //reset slideshow timeout whenever active slide is changed for whatever reason
+        stepSlideshow();
+
+        //API callback
+        o.onSlideChange && o.onSlideChange(n);
+
+        return n;
+    }
+
+    //changes position of the slider (in px) with given speed (in ms)
+    function changePos(pos, speed) {
+        var time = speed?speed+'ms':'';
+
+        slideBlock.style.webkitTransitionDuration =
+        slideBlock.style.MozTransitionDuration =
+        slideBlock.style.msTransitionDuration =
+        slideBlock.style.OTransitionDuration =
+        slideBlock.style.transitionDuration = time;
+
+        setPos(pos);
+    }
+
+    //fallback to `setInterval` animations for UAs with no CSS transitions
+    function changePosFallback(pos, speed) {
+        animationTimer && clearInterval(animationTimer);
+
+        if (!speed) {
+            setPos(pos);
+            return;
+        }
+
+        var startTime = +new Date,
+            startPos = slider.left;
+
+        animationTimer = setInterval(function() {
+            //rough bezier emulation
+            var diff, y,
+                elapsed = +new Date - startTime,
+                f = elapsed / speed,
+                bezier = [0, 0.7, 1, 1];
+
+            function getPoint(p1, p2) {
+                return (p2-p1)*f + p1;
+            }
+
+            if (f >= 1) {
+                setPos(pos);
+                clearInterval(animationTimer);
+                return;
+            }
+
+            diff = pos - startPos;
+
+            y = getPoint(
+                    getPoint(getPoint(bezier[0], bezier[1]), getPoint(bezier[1], bezier[2])),
+                    getPoint(getPoint(bezier[1], bezier[2]), getPoint(bezier[2], bezier[3]))
+                    );
+
+            setPos(Math.floor(y*diff + startPos));
+        }, 15);
+    }
+
+    //sets position of the slider (in px)
+    function setPos(pos) {
+        slideBlock.style.webkitTransform = 'translate('+pos+'px,0) translateZ(0)';
+        slideBlock.style.msTransform =
+        slideBlock.style.MozTransform =
+        slideBlock.style.OTransform =
+        slideBlock.style.transform = 'translateX('+pos+'px)';
+
+        slider.left = pos;
+    }
+
+    //`setPos` fallback for UAs with no CSS transforms support
+    function setPosFallback(pos) {
+        slideBlock.style.left = pos+'px';
+
+        slider.left = pos;
+    }
+
+    function nextSlide() {
+        var n = activeSlide + 1;
+
+        if (n > slidesNumber - 1) {
+            n = 0;
+        }
+
+        return changeActiveSlide(n);
+    }
+
+    function prevSlide() {
+        var n = activeSlide - 1;
+
+        if (n < 0) {
+            n = slidesNumber - 1;
+        }
+
+        return changeActiveSlide(n);
+    }
+
+    function startSlideshow() {
+        slideshowActive = true;
+        stepSlideshow();
+    }
+
+    //sets or resets timeout before switching to the next slide
+    function stepSlideshow() {
+        if (slideshowActive) {
+            slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+
+            slideshowTimeoutId = setTimeout(function() {
+                nextSlide();
+            },
+            o.slideshowInterval);
+        }
+    }
+
+    //pauses slideshow until `stepSlideshow` is invoked
+    function pauseSlideshow() {
+        slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+    }
+
+    function stopSlideshow() {
+        slideshowActive = false;
+        slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+    }
+
+    //this should be invoked when the width of the slider is changed
+    function onWidthChange() {
+        slider.width = _this.offsetWidth;
+
+        //have to do this in `px` because of webkit's rounding errors :-(
+        slideBlock.style.width = slider.width*slidesNumber+'px';
+        for (var i = 0; i < slidesNumber; i++) {
+            slider.slides[i].style.width = slider.width+'px';
+        }
+        changePos(-activeSlide*slider.width);
+    }
+
+    function addEvent(el, event, func, bool) {
+        if (!event) return;
+
+        el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
+    }
+
+    //init touch events
+    function touchInit() {
+        EventBurrito(slideBlock, {
+            mouse: o.mouseDrag,
+            start: function(event, start) {
+                //firefox doesn't want to apply cursor from `:active` CSS rule, have to add a class :-/
+                addClass(_this, classes.drag);
+            },
+            move: function(event, start, diff, speed) {
+                pauseSlideshow(); //pause the slideshow when touch is in progress
+
+                //if it's first slide and moving left or last slide and moving right -- resist!
+                diff.x =
+                diff.x /
+                    (
+                        (!activeSlide && diff.x > 0
+                        || activeSlide == slidesNumber - 1 && diff.x < 0)
+                        ?
+                        (Math.abs(diff.x)/slider.width*2 + 1)
+                        :
+                        1
+                    );
+
+                //change position of the slider appropriately
+                changePos(diff.x - slider.width*activeSlide);
+            },
+            end: function(event, start, diff, speed) {
+                if (diff.x) {
+                    var ratio = Math.abs(diff.x)/slider.width,
+                        //How many slides to skip. Remainder > 0.25 counts for one slide.
+                        skip = Math.floor(ratio) + (ratio - Math.floor(ratio) > 0.25?1:0),
+                        //Super-duper formula to detect a flick.
+                        //First, it's got to be fast enough.
+                        //Second, if `skip==0`, 20px move is enough to switch to the next slide.
+                        //If `skip>0`, it's enough to slide to the middle of the slide minus `slider.width/9` to skip even further.
+                        flick = diff.time < flickThreshold+flickThreshold*skip/1.8 && Math.abs(diff.x) - skip*slider.width > (skip?-slider.width/9:20);
+
+                    skip += (flick?1:0);
+
+                    if (diff.x < 0) {
+                        changeActiveSlide(activeSlide+skip, o.touchSpeed);
+                    }
+                    else {
+                        changeActiveSlide(activeSlide-skip, o.touchSpeed);
+                    }
+
+                    o.stopSlideshowAfterInteraction && stopSlideshow();
+                }
+
+                //remove the drag class
+                removeClass(_this, classes.drag);
+            }
+        });
+    }
+
+    function setup() {
+        var slideSource = o.slidesContainer || _this,
+            dotsTarget = o.dotsContainer || _this;
+
+        if (o.disableIfOneSlide && slideSource.children.length <= 1) return;
+
+        //If current UA doesn't support css transforms or transitions -- use fallback functions.
+        //(Using separate functions instead of checks for better performance)
+        if (!support.transforms || !!window.opera) setPos = setPosFallback;
+        if (!support.transitions || !!window.opera) changePos = changePosFallback;
+
+        slideBlock = o.slidesContainer || document.createElement('div');
+        addClass(slideBlock, classes.slides);
+
+        //get slides & generate dots
+        for (var i = 0, l = slideSource.children.length; i < l; i++) {
+            var slide = slideSource.children[i],
+                dot = document.createElement('li');
+
+            slider.slides.push(slide);
+
+            //`tabindex` makes dots tabbable
+            dot.setAttribute('tabindex', '0');
+            dot.setAttribute('role', 'button');
+
+            dot.innerHTML = '<span></span>';
+
+            (function(x, dotClosure) {
+                //bind events to dots
+                addEvent(dotClosure, 'click', function(event) {
+                    changeActiveSlide(x);
+                    o.stopSlideshowAfterInteraction && stopSlideshow();
+                });
+
+                //Bind the same function to Enter key except for the `blur` part -- I dont't want
+                //the focus to be lost when the user is using his keyboard to navigate.
+                addEvent(dotClosure, 'keyup', function(event) {
+                    if (event.keyCode == 13) {
+                        changeActiveSlide(x);
+                        o.stopSlideshowAfterInteraction && stopSlideshow();
+                    }
+                });
+
+                //Don't want to disable outlines completely for accessibility reasons.
+                //Instead, add class with `outline: 0` on mouseup and remove it on blur.
+                addEvent(dotClosure, 'mouseup', function(event) {
+                    addClass(dotClosure, classes.mouseClicked);
+                });
+
+                //capturing fixes IE bug
+                addEvent(dotClosure, 'blur', function(){
+                    removeClass(dotClosure, classes.mouseClicked);
+                }, true);
+
+                //This solves tabbing problems:
+                //When an element inside a slide catches focus we switch to that slide
+                //and reset `scrollLeft` of the slider block.
+                //`SetTimeout` solves Chrome's bug.
+                //Event capturing is used to catch events on the slide level.
+                //Since older IEs don't have capturing, `onfocusin` is used as a fallback.
+                addEvent(slide, 'focus', slide.onfocusin = function(e) {
+                    _this.scrollLeft = 0;
+                    setTimeout(function() {
+                        _this.scrollLeft = 0;
+                    }, 0);
+                    changeActiveSlide(x);
+                }, true);
+            })(i, dot)
+
+            slider.dots.push(dot);
+        }
+
+        slidesNumber = slider.slides.length;
+
+        slideWidth = 100/slidesNumber;
+
+        addClass(_this, classes.active);
+        removeClass(_this, classes.inactive);
+        o.mouseDrag && addClass(_this, classes.mouse);
+
+        slider.width = _this.offsetWidth;
+
+        //had to do this in `px` because of webkit's rounding errors :-(
+        slideBlock.style.width = slider.width*slidesNumber+'px';
+        for (var i = 0; i < slidesNumber; i++) {
+            slider.slides[i].style.width = slider.width+'px';
+            slideBlock.appendChild(slider.slides[i]);
+        }
+
+        if (!o.slidesContainer) _this.appendChild(slideBlock);
+
+        //append dots
+        if (o.dots && slidesNumber > 1) {
+            dotBlock = document.createElement('ul');
+            addClass(dotBlock, classes.dots);
+
+            for (var i = 0, l = slider.dots.length; i < l; i++) {
+                dotBlock.appendChild(slider.dots[i]);
+            }
+
+            if (o.dotsPrepend) {
+                dotsTarget.insertBefore(dotBlock,dotsTarget.firstChild);
+            }
+            else {
+                dotsTarget.appendChild(dotBlock);
+            }
+        }
+
+        //watch for slider width changes
+        addEvent(window, 'resize', onWidthChange);
+        addEvent(window, 'orientationchange', onWidthChange);
+
+        //init first slide, timeout to expose the API first
+        setTimeout(function() {
+            changeActiveSlide(o.startSlide, 0);
+        }, 0);
+
+        //init slideshow
+        if (o.slideshow) startSlideshow();
+
+        touchInit();
+
+        //API callback, timeout to expose the API first
+        setTimeout(function() {
+            o.onSetup && o.onSetup(slidesNumber);
+        }, 0);
+    }
+
+    //Init
+    setup();
+
+    //expose the API
+    return {
+        slideTo: function(slide) {
+            return changeActiveSlide(parseInt(slide, 10));
+        },
+
+        next: nextSlide,
+
+        prev: prevSlide,
+
+        //start slideshow
+        start: startSlideshow,
+
+        //stop slideshow
+        stop: stopSlideshow,
+
+        //pause slideshow until the next slide change
+        pause: pauseSlideshow,
+
+        //get current slide number
+        getCurrentPos: function() {
+            return activeSlide;
+        },
+
+        //get total number of slides
+        getSlidesNumber: function() {
+            return slidesNumber;
+        },
+
+        //invoke this when the slider's width is changed
+        recalcWidth: onWidthChange
+    };
+};
+
+//if jQuery is present -- create a plugin
+if (window.jQuery) {
+    (function($) {
+        $.fn.Peppermint = function(options) {
+            this.each(function() {
+                $(this).data('Peppermint', Peppermint(this, options));
+            });
+
+            return this;
+        };
+    })(window.jQuery);
+}
+
+/*!
+ * Event Burrito is a touch / mouse / pointer event unifier
+ * https://github.com/wilddeer/Event-Burrito
+ * Copyright Oleg Korsunsky | http://wd.dizaina.net/
+ *
+ * MIT License
+ */
+function EventBurrito(_this, options) {
+
+    var noop = function() {},
+        o = {
+            preventDefault: true,
+            clickTolerance: 0,
+            preventScroll: false,
+            mouse: true,
+            start: noop,
+            move: noop,
+            end: noop,
+            click: noop
+        };
+
+    //merge user options into defaults
+    options && mergeObjects(o, options);
+
+    var support = {
+            pointerEvents: !!window.navigator.pointerEnabled,
+            msPointerEvents: !!window.navigator.msPointerEnabled
+        },
+        start = {},
+        diff = {},
+        speed = {},
+        stack = [],
+        listeners = [],
+        isScrolling,
+        eventType,
+        clicksAllowed = true, //flag allowing default click actions (e.g. links)
+        eventModel = (support.pointerEvents? 1 : (support.msPointerEvents? 2 : 0)),
+        events = [
+            ['touchstart', 'touchmove', 'touchend', 'touchcancel'], //touch events
+            ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'], //pointer events
+            ['MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel'], //IE10 pointer events
+            ['mousedown', 'mousemove', 'mouseup', false] //mouse events
+        ],
+        //some checks for different event types
+        checks = [
+            //touch events
+            function(e) {
+                //skip the event if it's multitouch or pinch move
+                return (e.touches && e.touches.length > 1) || (e.scale && e.scale !== 1);
+            },
+            //pointer events
+            function(e) {
+                //Skip it, if:
+                //1. event is not primary (other pointers during multitouch),
+                //2. left mouse button is not pressed,
+                //3. mouse drag is disabled and event is not touch
+                return !e.isPrimary || (e.buttons && e.buttons !== 1) || (!o.mouse && e.pointerType !== 'touch' && e.pointerType !== 'pen');
+            },
+            //IE10 pointer events
+            function(e) {
+                //same checks as in pointer events
+                return !e.isPrimary || (e.buttons && e.buttons !== 1) || (!o.mouse && e.pointerType !== e.MSPOINTER_TYPE_TOUCH && e.pointerType !== e.MSPOINTER_TYPE_PEN);
+            },
+            //mouse events
+            function(e) {
+                //skip the event if left mouse button is not pressed
+                //in IE7-8 `buttons` is not defined, in IE9 LMB is 0
+                return (e.buttons && e.buttons !== 1);
+            }
+        ];
+
+    function mergeObjects(targetObj, sourceObject) {
+        for (var key in sourceObject) {
+            if (sourceObject.hasOwnProperty(key)) {
+                targetObj[key] = sourceObject[key];
+            }
+        }
+    }
+
+    function addEvent(el, event, func, bool) {
+        if (!event) return;
+
+        el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
+
+        //return event remover to easily remove anonymous functions later
+        return {
+            remove: function() {
+                removeEvent(el, event, func, bool);
+            }
+        };
+    }
+
+    function removeEvent(el, event, func, bool) {
+        if (!event) return;
+
+        el.removeEventListener? el.removeEventListener(event, func, !!bool): el.detachEvent('on'+event, func);
+    }
+
+    function preventDefault(event) {
+        event.preventDefault? event.preventDefault() : event.returnValue = false;
+    }
+
+    function getDiff(event) {
+        diff = {
+            x: (eventType? event.clientX : event.touches[0].clientX) - start.x,
+            y: (eventType? event.clientY : event.touches[0].clientY) - start.y,
+
+            time: Number(new Date) - start.time
+        };
+
+        if (diff.time - stack[stack.length - 1].time) {
+            for (var i = 0; i < stack.length - 1 && diff.time - stack[i].time > 80; i++);
+
+            speed = {
+                x: (diff.x - stack[i].x) / (diff.time - stack[i].time),
+                y: (diff.y - stack[i].y) / (diff.time - stack[i].time)
+            };
+
+            if (stack.length >= 5) stack.shift();
+            stack.push({x: diff.x, y: diff.y, time: diff.time});
+        }
+    }
+
+    function tStart(event, eType) {
+        clicksAllowed = true;
+        eventType = eType; //leak event type
+
+        if (checks[eventType](event)) return;
+
+        //attach event listeners to the document, so that the slider
+        //will continue to recieve events wherever the pointer is
+        addEvent(document, events[eventType][1], tMove);
+        addEvent(document, events[eventType][2], tEnd);
+        addEvent(document, events[eventType][3], tEnd);
+
+        //fixes WebKit's cursor while dragging
+        if (o.preventDefault && eventType) preventDefault(event);
+
+        //remember starting time and position
+        start = {
+            x: eventType? event.clientX : event.touches[0].clientX,
+            y: eventType? event.clientY : event.touches[0].clientY,
+
+            time: Number(new Date)
+        };
+
+        //reset
+        isScrolling = undefined;
+        diff = {x:0, y:0, time: 0};
+        speed = {x:0, y:0};
+        stack = [{x:0, y:0, time: 0}];
+
+        o.start(event, start);
+    }
+
+    function tMove(event) {
+        //if user is trying to scroll vertically -- do nothing
+        if ((!o.preventScroll && isScrolling) || checks[eventType](event)) return;
+
+        getDiff(event);
+
+        if (Math.abs(diff.x) > o.clickTolerance || Math.abs(diff.y) > o.clickTolerance) clicksAllowed = false; //if there was a move -- deny all the clicks before the next touchstart
+
+        //check whether the user is trying to scroll vertically
+        if (isScrolling === undefined && eventType !== 3) {
+            //assign and check `isScrolling` at the same time
+            if (isScrolling = (Math.abs(diff.x) < Math.abs(diff.y)) && !o.preventScroll) return;
+        }
+
+        if (o.preventDefault) preventDefault(event); //Prevent scrolling
+
+        o.move(event, start, diff, speed);
+    }
+
+    function tEnd(event) {
+        eventType && getDiff(event);
+
+        //IE likes to focus links after touchend.
+        //Since we don't want to disable link outlines completely for accessibility reasons,
+        //we just defocus it after touch and disable the outline for `:active` links in css.
+        //This way the outline will remain visible when using keyboard.
+        !clicksAllowed && event.target && event.target.blur && event.target.blur();
+
+        //detach event listeners from the document
+        removeEvent(document, events[eventType][1], tMove);
+        removeEvent(document, events[eventType][2], tEnd);
+        removeEvent(document, events[eventType][3], tEnd);
+
+        o.end(event, start, diff, speed);
+    }
+
+    function init() {
+        //bind touchstart
+        listeners.push(addEvent(_this, events[eventModel][0], function(e) {tStart(e, eventModel);}));
+        //prevent stuff from dragging when using mouse
+        listeners.push(addEvent(_this, 'dragstart', preventDefault));
+
+        //bind mousedown if necessary
+        if (o.mouse && !eventModel) {
+            listeners.push(addEvent(_this, events[3][0], function(e) {tStart(e, 3);}));
+        }
+
+        //No clicking during touch
+        listeners.push(addEvent(_this, 'click', function(event) {
+            clicksAllowed? o.click(event): preventDefault(event);
+        }));
+    }
+
+    init();
+
+    //expose the API
+    return {
+        getClicksAllowed: function() {
+            return clicksAllowed;
+        },
+        kill: function() {
+            for (var i = listeners.length - 1; i >= 0; i--) {
+                listeners[i].remove();
+            }
+        }
+    }
+}

sites/all/themes/gui/jee/bower_components/Peppermint/dist/peppermint.required.css

@@ -0,0 +1,62 @@
+/* Peppermint minimal required styles */
+
+.peppermint.peppermint-active {
+    position: relative;
+    overflow: hidden;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.peppermint.peppermint-active .peppermint-slides {
+    position: relative;
+    overflow: hidden; /* clearfix */
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+}
+
+.peppermint.peppermint-active .peppermint-slides > * {
+    float: left;
+    margin: 0;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    tap-highlight-color: transparent;
+}
+
+.peppermint.peppermint-active .peppermint-slides a:active,
+.peppermint.peppermint-active .peppermint-slides a:active img {
+    outline: none;
+}
+
+.peppermint.peppermint-active,
+.peppermint.peppermint-active .peppermint-dots,
+.peppermint.peppermint-active .peppermint-slides,
+.peppermint.peppermint-active .peppermint-slides > * {
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.peppermint.peppermint-mouse .peppermint-slides {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}
+
+.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
+    cursor: move;
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}

sites/all/themes/gui/jee/bower_components/Peppermint/dist/peppermint.suggested.css

@@ -0,0 +1,154 @@
+/* Peppermint required styles + default appearance styles */
+
+.peppermint.peppermint-active {
+    position: relative;
+    overflow: hidden;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.peppermint.peppermint-active .peppermint-slides {
+    position: relative;
+    overflow: hidden; /* clearfix */
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+}
+
+.peppermint.peppermint-active .peppermint-slides > * {
+    float: left;
+    margin: 0;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    tap-highlight-color: transparent;
+}
+
+.peppermint.peppermint-active .peppermint-slides a:active,
+.peppermint.peppermint-active .peppermint-slides a:active img {
+    outline: none;
+}
+
+.peppermint.peppermint-active,
+.peppermint.peppermint-active .peppermint-dots,
+.peppermint.peppermint-active .peppermint-slides,
+.peppermint.peppermint-active .peppermint-slides > * {
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.peppermint.peppermint-mouse .peppermint-slides {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}
+
+.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
+    cursor: move;
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}
+
+/* default appearance styles */
+.peppermint {
+    text-align: center;
+}
+
+.peppermint figure {
+    margin: 0 0 1.5em 0;
+}
+
+.peppermint figure img {
+    vertical-align: top;
+    max-width: 100%;
+    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+}
+
+.peppermint figure figcaption {
+    font-style: italic;
+    color: #787575;
+    font-size: 0.8em;
+    margin-top: 0.5em;
+}
+
+.peppermint.peppermint-active {
+    margin-bottom: 1.5em;
+}
+
+.peppermint-slides {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+/* dots */
+ul.peppermint-dots {
+    margin: 0.6em 0;
+    padding: 0;
+    text-align: center;
+    list-style-type: none;
+}
+
+.peppermint.peppermint-active ul.peppermint-dots {
+    margin: 0 0 0.6em 0;
+}
+
+.peppermint.peppermint-active .peppermint-slides + ul.peppermint-dots {
+    margin: 0.6em 0 0 0;
+}
+
+ul.peppermint-dots > li {
+    display: inline-block;
+    position: relative;
+    padding: 0.5em 0.6em;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    /* ie7 fallback */
+    *display: inline;
+    *zoom: 1;
+}
+
+ul.peppermint-dots > li.peppermint-mouse-clicked,
+ul.peppermint-dots > li:active {
+    outline: 0;
+}
+
+ul.peppermint-dots > li > span {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -4px 0 0 -4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #9b9890;
+}
+
+ul.peppermint-dots > li.peppermint-active-dot > span {
+    margin: -6px 0 0 -6px;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #9b9890;
+    background: transparent;
+}

sites/all/themes/gui/jee/bower_components/Peppermint/dist/pure/peppermint.pure.js

@@ -0,0 +1,493 @@
+/*!
+ * Peppermint touch slider
+ * v. 1.3.7 | https://github.com/wilddeer/Peppermint
+ * Copyright Oleg Korsunsky | http://wd.dizaina.net/
+ *
+ * Depends on Event Burrito | https://github.com/wilddeer/Event-Burrito
+ * MIT License
+ */
+function Peppermint(_this, options) {
+    var slider = {
+            slides: [],
+            dots: [],
+            left: 0
+        },
+        slidesNumber,
+        flickThreshold = 200, //Flick threshold (ms)
+        activeSlide = 0,
+        slideWidth,
+        dotBlock,
+        slideBlock,
+        slideshowTimeoutId,
+        slideshowActive,
+        animationTimer;
+
+    //default options
+    var o = {
+        speed: 300, //transition between slides in ms
+        touchSpeed: 300, //transition between slides in ms after touch
+        slideshow: false, //launch slideshow at start
+        slideshowInterval: 4000,
+        stopSlideshowAfterInteraction: false, //stop slideshow after user interaction
+        startSlide: 0, //first slide to show
+        mouseDrag: true, //enable mouse drag
+        disableIfOneSlide: true,
+        cssPrefix: 'peppermint-',
+        dots: false, //show dots
+        dotsPrepend: false, //dots before slides
+        dotsContainer: undefined,
+        slidesContainer: undefined,
+        onSlideChange: undefined, //slide change callback
+        onSetup: undefined //setup callback
+    };
+
+    //merge user options into defaults
+    options && mergeObjects(o, options);
+
+    var classes = {
+        inactive: o.cssPrefix + 'inactive',
+        active: o.cssPrefix + 'active',
+        mouse: o.cssPrefix + 'mouse',
+        drag: o.cssPrefix + 'drag',
+        slides: o.cssPrefix + 'slides',
+        dots: o.cssPrefix + 'dots',
+        activeDot: o.cssPrefix + 'active-dot',
+        mouseClicked: o.cssPrefix + 'mouse-clicked'
+    };
+
+    //feature detects
+    var support = {
+        transforms: testProp('transform'),
+        transitions: testProp('transition')
+    };
+
+    function mergeObjects(targetObj, sourceObject) {
+        for (var key in sourceObject) {
+            if (sourceObject.hasOwnProperty(key)) {
+                targetObj[key] = sourceObject[key];
+            }
+        }
+    }
+
+    function testProp(prop) {
+        var prefixes = ['Webkit', 'Moz', 'O', 'ms'],
+            block = document.createElement('div');
+
+        if (block.style[prop] !== undefined) return true;
+
+        prop = prop.charAt(0).toUpperCase() + prop.slice(1);
+        for (var i in prefixes) {
+            if (block.style[prefixes[i]+prop] !== undefined) return true;
+        }
+
+        return false;
+    }
+
+    function addClass(el, cl) {
+        if (!new RegExp('(\\s|^)'+cl+'(\\s|$)').test(el.className)) {
+            el.className += ' ' + cl;
+        }
+    }
+
+    function removeClass(el, cl) {
+        el.className = el.className.replace(new RegExp('(\\s+|^)'+cl+'(\\s+|$)', 'g'), ' ').replace(/^\s+|\s+$/g, '');
+    }
+
+    //n - slide number (starting from 0)
+    //speed - transition in ms, can be omitted
+    function changeActiveSlide(n, speed) {
+        if (n<0) {
+            n = 0;
+        }
+        else if (n>slidesNumber-1) {
+            n = slidesNumber-1;
+        }
+
+        //change active dot
+        for (var i = slider.dots.length - 1; i >= 0; i--) {
+            removeClass(slider.dots[i], classes.activeDot);
+        }
+
+        addClass(slider.dots[n], classes.activeDot);
+
+        activeSlide = n;
+
+        changePos(-n*slider.width, (speed===undefined?o.speed:speed));
+
+        //reset slideshow timeout whenever active slide is changed for whatever reason
+        stepSlideshow();
+
+        //API callback
+        o.onSlideChange && o.onSlideChange(n);
+
+        return n;
+    }
+
+    //changes position of the slider (in px) with given speed (in ms)
+    function changePos(pos, speed) {
+        var time = speed?speed+'ms':'';
+
+        slideBlock.style.webkitTransitionDuration =
+        slideBlock.style.MozTransitionDuration =
+        slideBlock.style.msTransitionDuration =
+        slideBlock.style.OTransitionDuration =
+        slideBlock.style.transitionDuration = time;
+
+        setPos(pos);
+    }
+
+    //fallback to `setInterval` animations for UAs with no CSS transitions
+    function changePosFallback(pos, speed) {
+        animationTimer && clearInterval(animationTimer);
+
+        if (!speed) {
+            setPos(pos);
+            return;
+        }
+
+        var startTime = +new Date,
+            startPos = slider.left;
+
+        animationTimer = setInterval(function() {
+            //rough bezier emulation
+            var diff, y,
+                elapsed = +new Date - startTime,
+                f = elapsed / speed,
+                bezier = [0, 0.7, 1, 1];
+
+            function getPoint(p1, p2) {
+                return (p2-p1)*f + p1;
+            }
+
+            if (f >= 1) {
+                setPos(pos);
+                clearInterval(animationTimer);
+                return;
+            }
+
+            diff = pos - startPos;
+
+            y = getPoint(
+                    getPoint(getPoint(bezier[0], bezier[1]), getPoint(bezier[1], bezier[2])),
+                    getPoint(getPoint(bezier[1], bezier[2]), getPoint(bezier[2], bezier[3]))
+                    );
+
+            setPos(Math.floor(y*diff + startPos));
+        }, 15);
+    }
+
+    //sets position of the slider (in px)
+    function setPos(pos) {
+        slideBlock.style.webkitTransform = 'translate('+pos+'px,0) translateZ(0)';
+        slideBlock.style.msTransform =
+        slideBlock.style.MozTransform =
+        slideBlock.style.OTransform =
+        slideBlock.style.transform = 'translateX('+pos+'px)';
+
+        slider.left = pos;
+    }
+
+    //`setPos` fallback for UAs with no CSS transforms support
+    function setPosFallback(pos) {
+        slideBlock.style.left = pos+'px';
+
+        slider.left = pos;
+    }
+
+    function nextSlide() {
+        var n = activeSlide + 1;
+
+        if (n > slidesNumber - 1) {
+            n = 0;
+        }
+
+        return changeActiveSlide(n);
+    }
+
+    function prevSlide() {
+        var n = activeSlide - 1;
+
+        if (n < 0) {
+            n = slidesNumber - 1;
+        }
+
+        return changeActiveSlide(n);
+    }
+
+    function startSlideshow() {
+        slideshowActive = true;
+        stepSlideshow();
+    }
+
+    //sets or resets timeout before switching to the next slide
+    function stepSlideshow() {
+        if (slideshowActive) {
+            slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+
+            slideshowTimeoutId = setTimeout(function() {
+                nextSlide();
+            },
+            o.slideshowInterval);
+        }
+    }
+
+    //pauses slideshow until `stepSlideshow` is invoked
+    function pauseSlideshow() {
+        slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+    }
+
+    function stopSlideshow() {
+        slideshowActive = false;
+        slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+    }
+
+    //this should be invoked when the width of the slider is changed
+    function onWidthChange() {
+        slider.width = _this.offsetWidth;
+
+        //have to do this in `px` because of webkit's rounding errors :-(
+        slideBlock.style.width = slider.width*slidesNumber+'px';
+        for (var i = 0; i < slidesNumber; i++) {
+            slider.slides[i].style.width = slider.width+'px';
+        }
+        changePos(-activeSlide*slider.width);
+    }
+
+    function addEvent(el, event, func, bool) {
+        if (!event) return;
+
+        el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
+    }
+
+    //init touch events
+    function touchInit() {
+        EventBurrito(slideBlock, {
+            mouse: o.mouseDrag,
+            start: function(event, start) {
+                //firefox doesn't want to apply cursor from `:active` CSS rule, have to add a class :-/
+                addClass(_this, classes.drag);
+            },
+            move: function(event, start, diff, speed) {
+                pauseSlideshow(); //pause the slideshow when touch is in progress
+
+                //if it's first slide and moving left or last slide and moving right -- resist!
+                diff.x =
+                diff.x /
+                    (
+                        (!activeSlide && diff.x > 0
+                        || activeSlide == slidesNumber - 1 && diff.x < 0)
+                        ?
+                        (Math.abs(diff.x)/slider.width*2 + 1)
+                        :
+                        1
+                    );
+
+                //change position of the slider appropriately
+                changePos(diff.x - slider.width*activeSlide);
+            },
+            end: function(event, start, diff, speed) {
+                if (diff.x) {
+                    var ratio = Math.abs(diff.x)/slider.width,
+                        //How many slides to skip. Remainder > 0.25 counts for one slide.
+                        skip = Math.floor(ratio) + (ratio - Math.floor(ratio) > 0.25?1:0),
+                        //Super-duper formula to detect a flick.
+                        //First, it's got to be fast enough.
+                        //Second, if `skip==0`, 20px move is enough to switch to the next slide.
+                        //If `skip>0`, it's enough to slide to the middle of the slide minus `slider.width/9` to skip even further.
+                        flick = diff.time < flickThreshold+flickThreshold*skip/1.8 && Math.abs(diff.x) - skip*slider.width > (skip?-slider.width/9:20);
+
+                    skip += (flick?1:0);
+
+                    if (diff.x < 0) {
+                        changeActiveSlide(activeSlide+skip, o.touchSpeed);
+                    }
+                    else {
+                        changeActiveSlide(activeSlide-skip, o.touchSpeed);
+                    }
+
+                    o.stopSlideshowAfterInteraction && stopSlideshow();
+                }
+
+                //remove the drag class
+                removeClass(_this, classes.drag);
+            }
+        });
+    }
+
+    function setup() {
+        var slideSource = o.slidesContainer || _this,
+            dotsTarget = o.dotsContainer || _this;
+
+        if (o.disableIfOneSlide && slideSource.children.length <= 1) return;
+
+        //If current UA doesn't support css transforms or transitions -- use fallback functions.
+        //(Using separate functions instead of checks for better performance)
+        if (!support.transforms || !!window.opera) setPos = setPosFallback;
+        if (!support.transitions || !!window.opera) changePos = changePosFallback;
+
+        slideBlock = o.slidesContainer || document.createElement('div');
+        addClass(slideBlock, classes.slides);
+
+        //get slides & generate dots
+        for (var i = 0, l = slideSource.children.length; i < l; i++) {
+            var slide = slideSource.children[i],
+                dot = document.createElement('li');
+
+            slider.slides.push(slide);
+
+            //`tabindex` makes dots tabbable
+            dot.setAttribute('tabindex', '0');
+            dot.setAttribute('role', 'button');
+
+            dot.innerHTML = '<span></span>';
+
+            (function(x, dotClosure) {
+                //bind events to dots
+                addEvent(dotClosure, 'click', function(event) {
+                    changeActiveSlide(x);
+                    o.stopSlideshowAfterInteraction && stopSlideshow();
+                });
+
+                //Bind the same function to Enter key except for the `blur` part -- I dont't want
+                //the focus to be lost when the user is using his keyboard to navigate.
+                addEvent(dotClosure, 'keyup', function(event) {
+                    if (event.keyCode == 13) {
+                        changeActiveSlide(x);
+                        o.stopSlideshowAfterInteraction && stopSlideshow();
+                    }
+                });
+
+                //Don't want to disable outlines completely for accessibility reasons.
+                //Instead, add class with `outline: 0` on mouseup and remove it on blur.
+                addEvent(dotClosure, 'mouseup', function(event) {
+                    addClass(dotClosure, classes.mouseClicked);
+                });
+
+                //capturing fixes IE bug
+                addEvent(dotClosure, 'blur', function(){
+                    removeClass(dotClosure, classes.mouseClicked);
+                }, true);
+
+                //This solves tabbing problems:
+                //When an element inside a slide catches focus we switch to that slide
+                //and reset `scrollLeft` of the slider block.
+                //`SetTimeout` solves Chrome's bug.
+                //Event capturing is used to catch events on the slide level.
+                //Since older IEs don't have capturing, `onfocusin` is used as a fallback.
+                addEvent(slide, 'focus', slide.onfocusin = function(e) {
+                    _this.scrollLeft = 0;
+                    setTimeout(function() {
+                        _this.scrollLeft = 0;
+                    }, 0);
+                    changeActiveSlide(x);
+                }, true);
+            })(i, dot)
+
+            slider.dots.push(dot);
+        }
+
+        slidesNumber = slider.slides.length;
+
+        slideWidth = 100/slidesNumber;
+
+        addClass(_this, classes.active);
+        removeClass(_this, classes.inactive);
+        o.mouseDrag && addClass(_this, classes.mouse);
+
+        slider.width = _this.offsetWidth;
+
+        //had to do this in `px` because of webkit's rounding errors :-(
+        slideBlock.style.width = slider.width*slidesNumber+'px';
+        for (var i = 0; i < slidesNumber; i++) {
+            slider.slides[i].style.width = slider.width+'px';
+            slideBlock.appendChild(slider.slides[i]);
+        }
+
+        if (!o.slidesContainer) _this.appendChild(slideBlock);
+
+        //append dots
+        if (o.dots && slidesNumber > 1) {
+            dotBlock = document.createElement('ul');
+            addClass(dotBlock, classes.dots);
+
+            for (var i = 0, l = slider.dots.length; i < l; i++) {
+                dotBlock.appendChild(slider.dots[i]);
+            }
+
+            if (o.dotsPrepend) {
+                dotsTarget.insertBefore(dotBlock,dotsTarget.firstChild);
+            }
+            else {
+                dotsTarget.appendChild(dotBlock);
+            }
+        }
+
+        //watch for slider width changes
+        addEvent(window, 'resize', onWidthChange);
+        addEvent(window, 'orientationchange', onWidthChange);
+
+        //init first slide, timeout to expose the API first
+        setTimeout(function() {
+            changeActiveSlide(o.startSlide, 0);
+        }, 0);
+
+        //init slideshow
+        if (o.slideshow) startSlideshow();
+
+        touchInit();
+
+        //API callback, timeout to expose the API first
+        setTimeout(function() {
+            o.onSetup && o.onSetup(slidesNumber);
+        }, 0);
+    }
+
+    //Init
+    setup();
+
+    //expose the API
+    return {
+        slideTo: function(slide) {
+            return changeActiveSlide(parseInt(slide, 10));
+        },
+
+        next: nextSlide,
+
+        prev: prevSlide,
+
+        //start slideshow
+        start: startSlideshow,
+
+        //stop slideshow
+        stop: stopSlideshow,
+
+        //pause slideshow until the next slide change
+        pause: pauseSlideshow,
+
+        //get current slide number
+        getCurrentPos: function() {
+            return activeSlide;
+        },
+
+        //get total number of slides
+        getSlidesNumber: function() {
+            return slidesNumber;
+        },
+
+        //invoke this when the slider's width is changed
+        recalcWidth: onWidthChange
+    };
+};
+
+//if jQuery is present -- create a plugin
+if (window.jQuery) {
+    (function($) {
+        $.fn.Peppermint = function(options) {
+            this.each(function() {
+                $(this).data('Peppermint', Peppermint(this, options));
+            });
+
+            return this;
+        };
+    })(window.jQuery);
+}

sites/all/themes/gui/jee/bower_components/Peppermint/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "Peppermint",
+  "version": "1.3.7",
+  "license": "MIT",
+  "homepage": "https://github.com/wilddeer/Peppermint",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wilddeer/Peppermint.git"
+  },
+  "author": {
+    "name": "Oleg Korsunsky",
+    "url": "http://wd.dizaina.net/"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-uglify": "~0.2.5",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-bump": "0.0.14",
+    "grunt-shell": "~0.7.0"
+  }
+}

sites/all/themes/gui/jee/bower_components/Peppermint/src/peppermint.appearance.css

@@ -0,0 +1,90 @@
+.peppermint {
+    text-align: center;
+}
+
+.peppermint figure {
+    margin: 0 0 1.5em 0;
+}
+
+.peppermint figure img {
+    vertical-align: top;
+    max-width: 100%;
+    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+}
+
+.peppermint figure figcaption {
+    font-style: italic;
+    color: #787575;
+    font-size: 0.8em;
+    margin-top: 0.5em;
+}
+
+.peppermint.peppermint-active {
+    margin-bottom: 1.5em;
+}
+
+.peppermint-slides {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+/* dots */
+ul.peppermint-dots {
+    margin: 0.6em 0;
+    padding: 0;
+    text-align: center;
+    list-style-type: none;
+}
+
+.peppermint.peppermint-active ul.peppermint-dots {
+    margin: 0 0 0.6em 0;
+}
+
+.peppermint.peppermint-active .peppermint-slides + ul.peppermint-dots {
+    margin: 0.6em 0 0 0;
+}
+
+ul.peppermint-dots > li {
+    display: inline-block;
+    position: relative;
+    padding: 0.5em 0.6em;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    /* ie7 fallback */
+    *display: inline;
+    *zoom: 1;
+}
+
+ul.peppermint-dots > li.peppermint-mouse-clicked,
+ul.peppermint-dots > li:active {
+    outline: 0;
+}
+
+ul.peppermint-dots > li > span {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -4px 0 0 -4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #9b9890;
+}
+
+ul.peppermint-dots > li.peppermint-active-dot > span {
+    margin: -6px 0 0 -6px;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #9b9890;
+    background: transparent;
+}

sites/all/themes/gui/jee/bower_components/Peppermint/src/peppermint.js

@@ -0,0 +1,485 @@
+function Peppermint(_this, options) {
+    var slider = {
+            slides: [],
+            dots: [],
+            left: 0
+        },
+        slidesNumber,
+        flickThreshold = 200, //Flick threshold (ms)
+        activeSlide = 0,
+        slideWidth,
+        dotBlock,
+        slideBlock,
+        slideshowTimeoutId,
+        slideshowActive,
+        animationTimer;
+
+    //default options
+    var o = {
+        speed: 300, //transition between slides in ms
+        touchSpeed: 300, //transition between slides in ms after touch
+        slideshow: false, //launch slideshow at start
+        slideshowInterval: 4000,
+        stopSlideshowAfterInteraction: false, //stop slideshow after user interaction
+        startSlide: 0, //first slide to show
+        mouseDrag: true, //enable mouse drag
+        disableIfOneSlide: true,
+        cssPrefix: 'peppermint-',
+        dots: false, //show dots
+        dotsPrepend: false, //dots before slides
+        dotsContainer: undefined,
+        slidesContainer: undefined,
+        onSlideChange: undefined, //slide change callback
+        onSetup: undefined //setup callback
+    };
+
+    //merge user options into defaults
+    options && mergeObjects(o, options);
+
+    var classes = {
+        inactive: o.cssPrefix + 'inactive',
+        active: o.cssPrefix + 'active',
+        mouse: o.cssPrefix + 'mouse',
+        drag: o.cssPrefix + 'drag',
+        slides: o.cssPrefix + 'slides',
+        dots: o.cssPrefix + 'dots',
+        activeDot: o.cssPrefix + 'active-dot',
+        mouseClicked: o.cssPrefix + 'mouse-clicked'
+    };
+
+    //feature detects
+    var support = {
+        transforms: testProp('transform'),
+        transitions: testProp('transition')
+    };
+
+    function mergeObjects(targetObj, sourceObject) {
+        for (var key in sourceObject) {
+            if (sourceObject.hasOwnProperty(key)) {
+                targetObj[key] = sourceObject[key];
+            }
+        }
+    }
+
+    function testProp(prop) {
+        var prefixes = ['Webkit', 'Moz', 'O', 'ms'],
+            block = document.createElement('div');
+
+        if (block.style[prop] !== undefined) return true;
+
+        prop = prop.charAt(0).toUpperCase() + prop.slice(1);
+        for (var i in prefixes) {
+            if (block.style[prefixes[i]+prop] !== undefined) return true;
+        }
+
+        return false;
+    }
+
+    function addClass(el, cl) {
+        if (!new RegExp('(\\s|^)'+cl+'(\\s|$)').test(el.className)) {
+            el.className += ' ' + cl;
+        }
+    }
+
+    function removeClass(el, cl) {
+        el.className = el.className.replace(new RegExp('(\\s+|^)'+cl+'(\\s+|$)', 'g'), ' ').replace(/^\s+|\s+$/g, '');
+    }
+
+    //n - slide number (starting from 0)
+    //speed - transition in ms, can be omitted
+    function changeActiveSlide(n, speed) {
+        if (n<0) {
+            n = 0;
+        }
+        else if (n>slidesNumber-1) {
+            n = slidesNumber-1;
+        }
+
+        //change active dot
+        for (var i = slider.dots.length - 1; i >= 0; i--) {
+            removeClass(slider.dots[i], classes.activeDot);
+        }
+
+        addClass(slider.dots[n], classes.activeDot);
+
+        activeSlide = n;
+
+        changePos(-n*slider.width, (speed===undefined?o.speed:speed));
+
+        //reset slideshow timeout whenever active slide is changed for whatever reason
+        stepSlideshow();
+
+        //API callback
+        o.onSlideChange && o.onSlideChange(n);
+
+        return n;
+    }
+
+    //changes position of the slider (in px) with given speed (in ms)
+    function changePos(pos, speed) {
+        var time = speed?speed+'ms':'';
+
+        slideBlock.style.webkitTransitionDuration =
+        slideBlock.style.MozTransitionDuration =
+        slideBlock.style.msTransitionDuration =
+        slideBlock.style.OTransitionDuration =
+        slideBlock.style.transitionDuration = time;
+
+        setPos(pos);
+    }
+
+    //fallback to `setInterval` animations for UAs with no CSS transitions
+    function changePosFallback(pos, speed) {
+        animationTimer && clearInterval(animationTimer);
+
+        if (!speed) {
+            setPos(pos);
+            return;
+        }
+
+        var startTime = +new Date,
+            startPos = slider.left;
+
+        animationTimer = setInterval(function() {
+            //rough bezier emulation
+            var diff, y,
+                elapsed = +new Date - startTime,
+                f = elapsed / speed,
+                bezier = [0, 0.7, 1, 1];
+
+            function getPoint(p1, p2) {
+                return (p2-p1)*f + p1;
+            }
+
+            if (f >= 1) {
+                setPos(pos);
+                clearInterval(animationTimer);
+                return;
+            }
+
+            diff = pos - startPos;
+
+            y = getPoint(
+                    getPoint(getPoint(bezier[0], bezier[1]), getPoint(bezier[1], bezier[2])),
+                    getPoint(getPoint(bezier[1], bezier[2]), getPoint(bezier[2], bezier[3]))
+                    );
+
+            setPos(Math.floor(y*diff + startPos));
+        }, 15);
+    }
+
+    //sets position of the slider (in px)
+    function setPos(pos) {
+        slideBlock.style.webkitTransform = 'translate('+pos+'px,0) translateZ(0)';
+        slideBlock.style.msTransform =
+        slideBlock.style.MozTransform =
+        slideBlock.style.OTransform =
+        slideBlock.style.transform = 'translateX('+pos+'px)';
+
+        slider.left = pos;
+    }
+
+    //`setPos` fallback for UAs with no CSS transforms support
+    function setPosFallback(pos) {
+        slideBlock.style.left = pos+'px';
+
+        slider.left = pos;
+    }
+
+    function nextSlide() {
+        var n = activeSlide + 1;
+
+        if (n > slidesNumber - 1) {
+            n = 0;
+        }
+
+        return changeActiveSlide(n);
+    }
+
+    function prevSlide() {
+        var n = activeSlide - 1;
+
+        if (n < 0) {
+            n = slidesNumber - 1;
+        }
+
+        return changeActiveSlide(n);
+    }
+
+    function startSlideshow() {
+        slideshowActive = true;
+        stepSlideshow();
+    }
+
+    //sets or resets timeout before switching to the next slide
+    function stepSlideshow() {
+        if (slideshowActive) {
+            slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+
+            slideshowTimeoutId = setTimeout(function() {
+                nextSlide();
+            },
+            o.slideshowInterval);
+        }
+    }
+
+    //pauses slideshow until `stepSlideshow` is invoked
+    function pauseSlideshow() {
+        slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+    }
+
+    function stopSlideshow() {
+        slideshowActive = false;
+        slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
+    }
+
+    //this should be invoked when the width of the slider is changed
+    function onWidthChange() {
+        slider.width = _this.offsetWidth;
+
+        //have to do this in `px` because of webkit's rounding errors :-(
+        slideBlock.style.width = slider.width*slidesNumber+'px';
+        for (var i = 0; i < slidesNumber; i++) {
+            slider.slides[i].style.width = slider.width+'px';
+        }
+        changePos(-activeSlide*slider.width);
+    }
+
+    function addEvent(el, event, func, bool) {
+        if (!event) return;
+
+        el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
+    }
+
+    //init touch events
+    function touchInit() {
+        EventBurrito(slideBlock, {
+            mouse: o.mouseDrag,
+            start: function(event, start) {
+                //firefox doesn't want to apply cursor from `:active` CSS rule, have to add a class :-/
+                addClass(_this, classes.drag);
+            },
+            move: function(event, start, diff, speed) {
+                pauseSlideshow(); //pause the slideshow when touch is in progress
+
+                //if it's first slide and moving left or last slide and moving right -- resist!
+                diff.x =
+                diff.x /
+                    (
+                        (!activeSlide && diff.x > 0
+                        || activeSlide == slidesNumber - 1 && diff.x < 0)
+                        ?
+                        (Math.abs(diff.x)/slider.width*2 + 1)
+                        :
+                        1
+                    );
+
+                //change position of the slider appropriately
+                changePos(diff.x - slider.width*activeSlide);
+            },
+            end: function(event, start, diff, speed) {
+                if (diff.x) {
+                    var ratio = Math.abs(diff.x)/slider.width,
+                        //How many slides to skip. Remainder > 0.25 counts for one slide.
+                        skip = Math.floor(ratio) + (ratio - Math.floor(ratio) > 0.25?1:0),
+                        //Super-duper formula to detect a flick.
+                        //First, it's got to be fast enough.
+                        //Second, if `skip==0`, 20px move is enough to switch to the next slide.
+                        //If `skip>0`, it's enough to slide to the middle of the slide minus `slider.width/9` to skip even further.
+                        flick = diff.time < flickThreshold+flickThreshold*skip/1.8 && Math.abs(diff.x) - skip*slider.width > (skip?-slider.width/9:20);
+
+                    skip += (flick?1:0);
+
+                    if (diff.x < 0) {
+                        changeActiveSlide(activeSlide+skip, o.touchSpeed);
+                    }
+                    else {
+                        changeActiveSlide(activeSlide-skip, o.touchSpeed);
+                    }
+
+                    o.stopSlideshowAfterInteraction && stopSlideshow();
+                }
+
+                //remove the drag class
+                removeClass(_this, classes.drag);
+            }
+        });
+    }
+
+    function setup() {
+        var slideSource = o.slidesContainer || _this,
+            dotsTarget = o.dotsContainer || _this;
+
+        if (o.disableIfOneSlide && slideSource.children.length <= 1) return;
+
+        //If current UA doesn't support css transforms or transitions -- use fallback functions.
+        //(Using separate functions instead of checks for better performance)
+        if (!support.transforms || !!window.opera) setPos = setPosFallback;
+        if (!support.transitions || !!window.opera) changePos = changePosFallback;
+
+        slideBlock = o.slidesContainer || document.createElement('div');
+        addClass(slideBlock, classes.slides);
+
+        //get slides & generate dots
+        for (var i = 0, l = slideSource.children.length; i < l; i++) {
+            var slide = slideSource.children[i],
+                dot = document.createElement('li');
+
+            slider.slides.push(slide);
+
+            //`tabindex` makes dots tabbable
+            dot.setAttribute('tabindex', '0');
+            dot.setAttribute('role', 'button');
+
+            dot.innerHTML = '<span></span>';
+
+            (function(x, dotClosure) {
+                //bind events to dots
+                addEvent(dotClosure, 'click', function(event) {
+                    changeActiveSlide(x);
+                    o.stopSlideshowAfterInteraction && stopSlideshow();
+                });
+
+                //Bind the same function to Enter key except for the `blur` part -- I dont't want
+                //the focus to be lost when the user is using his keyboard to navigate.
+                addEvent(dotClosure, 'keyup', function(event) {
+                    if (event.keyCode == 13) {
+                        changeActiveSlide(x);
+                        o.stopSlideshowAfterInteraction && stopSlideshow();
+                    }
+                });
+
+                //Don't want to disable outlines completely for accessibility reasons.
+                //Instead, add class with `outline: 0` on mouseup and remove it on blur.
+                addEvent(dotClosure, 'mouseup', function(event) {
+                    addClass(dotClosure, classes.mouseClicked);
+                });
+
+                //capturing fixes IE bug
+                addEvent(dotClosure, 'blur', function(){
+                    removeClass(dotClosure, classes.mouseClicked);
+                }, true);
+
+                //This solves tabbing problems:
+                //When an element inside a slide catches focus we switch to that slide
+                //and reset `scrollLeft` of the slider block.
+                //`SetTimeout` solves Chrome's bug.
+                //Event capturing is used to catch events on the slide level.
+                //Since older IEs don't have capturing, `onfocusin` is used as a fallback.
+                addEvent(slide, 'focus', slide.onfocusin = function(e) {
+                    _this.scrollLeft = 0;
+                    setTimeout(function() {
+                        _this.scrollLeft = 0;
+                    }, 0);
+                    changeActiveSlide(x);
+                }, true);
+            })(i, dot)
+
+            slider.dots.push(dot);
+        }
+
+        slidesNumber = slider.slides.length;
+
+        slideWidth = 100/slidesNumber;
+
+        addClass(_this, classes.active);
+        removeClass(_this, classes.inactive);
+        o.mouseDrag && addClass(_this, classes.mouse);
+
+        slider.width = _this.offsetWidth;
+
+        //had to do this in `px` because of webkit's rounding errors :-(
+        slideBlock.style.width = slider.width*slidesNumber+'px';
+        for (var i = 0; i < slidesNumber; i++) {
+            slider.slides[i].style.width = slider.width+'px';
+            slideBlock.appendChild(slider.slides[i]);
+        }
+
+        if (!o.slidesContainer) _this.appendChild(slideBlock);
+
+        //append dots
+        if (o.dots && slidesNumber > 1) {
+            dotBlock = document.createElement('ul');
+            addClass(dotBlock, classes.dots);
+
+            for (var i = 0, l = slider.dots.length; i < l; i++) {
+                dotBlock.appendChild(slider.dots[i]);
+            }
+
+            if (o.dotsPrepend) {
+                dotsTarget.insertBefore(dotBlock,dotsTarget.firstChild);
+            }
+            else {
+                dotsTarget.appendChild(dotBlock);
+            }
+        }
+
+        //watch for slider width changes
+        addEvent(window, 'resize', onWidthChange);
+        addEvent(window, 'orientationchange', onWidthChange);
+
+        //init first slide, timeout to expose the API first
+        setTimeout(function() {
+            changeActiveSlide(o.startSlide, 0);
+        }, 0);
+
+        //init slideshow
+        if (o.slideshow) startSlideshow();
+
+        touchInit();
+
+        //API callback, timeout to expose the API first
+        setTimeout(function() {
+            o.onSetup && o.onSetup(slidesNumber);
+        }, 0);
+    }
+
+    //Init
+    setup();
+
+    //expose the API
+    return {
+        slideTo: function(slide) {
+            return changeActiveSlide(parseInt(slide, 10));
+        },
+
+        next: nextSlide,
+
+        prev: prevSlide,
+
+        //start slideshow
+        start: startSlideshow,
+
+        //stop slideshow
+        stop: stopSlideshow,
+
+        //pause slideshow until the next slide change
+        pause: pauseSlideshow,
+
+        //get current slide number
+        getCurrentPos: function() {
+            return activeSlide;
+        },
+
+        //get total number of slides
+        getSlidesNumber: function() {
+            return slidesNumber;
+        },
+
+        //invoke this when the slider's width is changed
+        recalcWidth: onWidthChange
+    };
+};
+
+//if jQuery is present -- create a plugin
+if (window.jQuery) {
+    (function($) {
+        $.fn.Peppermint = function(options) {
+            this.each(function() {
+                $(this).data('Peppermint', Peppermint(this, options));
+            });
+
+            return this;
+        };
+    })(window.jQuery);
+}

sites/all/themes/gui/jee/bower_components/Peppermint/src/peppermint.required.css

@@ -0,0 +1,60 @@
+.peppermint.peppermint-active {
+    position: relative;
+    overflow: hidden;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.peppermint.peppermint-active .peppermint-slides {
+    position: relative;
+    overflow: hidden; /* clearfix */
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+}
+
+.peppermint.peppermint-active .peppermint-slides > * {
+    float: left;
+    margin: 0;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    tap-highlight-color: transparent;
+}
+
+.peppermint.peppermint-active .peppermint-slides a:active,
+.peppermint.peppermint-active .peppermint-slides a:active img {
+    outline: none;
+}
+
+.peppermint.peppermint-active,
+.peppermint.peppermint-active .peppermint-dots,
+.peppermint.peppermint-active .peppermint-slides,
+.peppermint.peppermint-active .peppermint-slides > * {
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.peppermint.peppermint-mouse .peppermint-slides {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}
+
+.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
+    cursor: move;
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}

sites/all/themes/gui/jee/css/jee.css

@@ -3974,6 +3974,12 @@ div.messages {
     |_____|__|__|__|__|__|    |_| |_____|__|__|_____|  |_____|_____|_|___|_____|__|__|_____|__  _|_____|_____|
                                                                                               |__|
   */
+  /* ____  ____  _______   ____________     ________  _____    ____  ________________  _____
+    / __ \/ __ \/ ____/ | / / ____/ __ \   / ____/ / / /   |  / __ \/_  __/ ____/ __ \/ ___/
+   / / / / /_/ / __/ /  |/ / __/ / / / /  / /   / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
+  / /_/ / ____/ /___/ /|  / /___/ /_/ /  / /___/ __  / ___ |/ ____/ / / / /___/ _, _/___/ /
+  \____/_/   /_____/_/ |_/_____/_____/   \____/_/ /_/_/  |_/_/     /_/ /_____/_/ |_|/____/
+  */
 }
 /* line 174, jee.scss */
 #main > .region, #main > .region > .block-system, #main > .region > .block-system > .content {
@@ -3982,161 +3988,161 @@ div.messages {
   height: 100%;
   overflow: hidden;
 }
-/* line 189, jee.scss */
-#main #node-2::after {
+/* line 190, jee.scss */
+#main #node-2.node-teaser::after {
   background: transparent url("../assets/img/bgd-sol.png") no-repeat center center;
   background: none, url("../assets/img/bgd-sol.svg") no-repeat center center;
 }
-/* line 190, jee.scss */
-#main #node-2, #main #node-2 a {
+/* line 191, jee.scss */
+#main #node-2.node-teaser, #main #node-2.node-teaser a {
   color: #b24c14;
 }
-/* line 191, jee.scss */
-#main #node-2 h2.node-title, #main #node-2 h2.node-title a {
+/* line 192, jee.scss */
+#main #node-2.node-teaser h2.node-title, #main #node-2.node-teaser h2.node-title a {
   color: #d85509;
 }
-/* line 192, jee.scss */
-#main #node-2 .field-name-field-vignette {
+/* line 193, jee.scss */
+#main #node-2.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-sol.png") no-repeat center center;
   background: none, url("../assets/img/shadow-sol.svg") no-repeat center center;
 }
-/* line 193, jee.scss */
-#main #node-2 .line {
+/* line 194, jee.scss */
+#main #node-2.node-teaser .line {
   background-color: #ea5b0c;
 }
-/* line 197, jee.scss */
-#main #node-3::after {
+/* line 200, jee.scss */
+#main #node-3.node-teaser::after {
   background: transparent url("../assets/img/bgd-dph.png") no-repeat center center;
   background: none, url("../assets/img/bgd-dph.svg") no-repeat center center;
 }
-/* line 198, jee.scss */
-#main #node-3, #main #node-3 a {
+/* line 201, jee.scss */
+#main #node-3.node-teaser, #main #node-3.node-teaser a {
   color: #686b00;
 }
-/* line 199, jee.scss */
-#main #node-3 h2.node-title, #main #node-3 h2.node-title a {
+/* line 202, jee.scss */
+#main #node-3.node-teaser h2.node-title, #main #node-3.node-teaser h2.node-title a {
   color: #afaf00;
 }
-/* line 200, jee.scss */
-#main #node-3 .field-name-field-vignette {
+/* line 203, jee.scss */
+#main #node-3.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-dph.png") no-repeat center center;
   background: none, url("../assets/img/shadow-dph.svg") no-repeat center center;
 }
-/* line 201, jee.scss */
-#main #node-3 .line {
+/* line 204, jee.scss */
+#main #node-3.node-teaser .line {
   background-color: #cecd00;
 }
-/* line 205, jee.scss */
-#main #node-4::after {
+/* line 210, jee.scss */
+#main #node-4.node-teaser::after {
   background: transparent url("../assets/img/bgd-sub.png") no-repeat center center;
   background: none, url("../assets/img/bgd-sub.svg") no-repeat center center;
 }
-/* line 206, jee.scss */
-#main #node-4, #main #node-4 a {
+/* line 211, jee.scss */
+#main #node-4.node-teaser, #main #node-4.node-teaser a {
   color: #b71330;
 }
-/* line 207, jee.scss */
-#main #node-4 h2.node-title, #main #node-4 h2.node-title a {
+/* line 212, jee.scss */
+#main #node-4.node-teaser h2.node-title, #main #node-4.node-teaser h2.node-title a {
   color: #cd0734;
 }
-/* line 208, jee.scss */
-#main #node-4 .field-name-field-vignette {
+/* line 213, jee.scss */
+#main #node-4.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-sub.png") no-repeat center center;
   background: none, url("../assets/img/shadow-sub.svg") no-repeat center center;
 }
-/* line 209, jee.scss */
-#main #node-4 .line {
+/* line 214, jee.scss */
+#main #node-4.node-teaser .line {
   background-color: #de003a;
 }
-/* line 213, jee.scss */
-#main #node-5::after {
+/* line 220, jee.scss */
+#main #node-5.node-teaser::after {
   background: transparent url("../assets/img/bgd-bc.png") no-repeat center center;
   background: none, url("../assets/img/bgd-bc.svg") no-repeat center center;
 }
-/* line 214, jee.scss */
-#main #node-5, #main #node-5 a {
+/* line 221, jee.scss */
+#main #node-5.node-teaser, #main #node-5.node-teaser a {
   color: #033d6f;
 }
-/* line 215, jee.scss */
-#main #node-5 h2.node-title, #main #node-5 h2.node-title a {
+/* line 222, jee.scss */
+#main #node-5.node-teaser h2.node-title, #main #node-5.node-teaser h2.node-title a {
   color: #024b87;
 }
-/* line 216, jee.scss */
-#main #node-5 .field-name-field-vignette {
+/* line 223, jee.scss */
+#main #node-5.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-bc.png") no-repeat center center;
   background: none, url("../assets/img/shadow-bc.svg") no-repeat center center;
 }
-/* line 217, jee.scss */
-#main #node-5 .line {
+/* line 224, jee.scss */
+#main #node-5.node-teaser .line {
   background-color: #0066b1;
 }
-/* line 221, jee.scss */
-#main #node-6::after {
+/* line 230, jee.scss */
+#main #node-6.node-teaser::after {
   background: transparent url("../assets/img/bgd-opp.png") no-repeat center center;
   background: none, url("../assets/img/bgd-opp.svg") no-repeat center center;
 }
-/* line 222, jee.scss */
-#main #node-6, #main #node-6 a {
+/* line 231, jee.scss */
+#main #node-6.node-teaser, #main #node-6.node-teaser a {
   color: #7f1965;
 }
-/* line 223, jee.scss */
-#main #node-6 h2.node-title, #main #node-6 h2.node-title a {
+/* line 232, jee.scss */
+#main #node-6.node-teaser h2.node-title, #main #node-6.node-teaser h2.node-title a {
   color: #941b80;
 }
-/* line 224, jee.scss */
-#main #node-6 .field-name-field-vignette {
+/* line 233, jee.scss */
+#main #node-6.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-opp.png") no-repeat center center;
   background: none, url("../assets/img/shadow-opp.svg") no-repeat center center;
 }
-/* line 225, jee.scss */
-#main #node-6 .line {
+/* line 234, jee.scss */
+#main #node-6.node-teaser .line {
   background-color: #af1380;
 }
-/* line 229, jee.scss */
-#main #node-7::after {
+/* line 240, jee.scss */
+#main #node-7.node-teaser::after {
   background: transparent url("../assets/img/bgd-dub.png") no-repeat center center;
   background: none, url("../assets/img/bgd-dub.svg") no-repeat center center;
 }
-/* line 230, jee.scss */
-#main #node-7, #main #node-7 a {
+/* line 241, jee.scss */
+#main #node-7.node-teaser, #main #node-7.node-teaser a {
   color: #22742c;
 }
-/* line 231, jee.scss */
-#main #node-7 h2.node-title, #main #node-7 h2.node-title a {
+/* line 242, jee.scss */
+#main #node-7.node-teaser h2.node-title, #main #node-7.node-teaser h2.node-title a {
   color: #288d80;
 }
-/* line 232, jee.scss */
-#main #node-7 .field-name-field-vignette {
+/* line 243, jee.scss */
+#main #node-7.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-dub.png") no-repeat center center;
   background: none, url("../assets/img/shadow-dub.svg") no-repeat center center;
 }
-/* line 233, jee.scss */
-#main #node-7 .line {
+/* line 244, jee.scss */
+#main #node-7.node-teaser .line {
   background-color: #62a530;
 }
-/* line 237, jee.scss */
-#main #node-8::after {
+/* line 250, jee.scss */
+#main #node-8.node-teaser::after {
   background: transparent url("../assets/img/bgd-juso.png") no-repeat center center;
   background: none, url("../assets/img/bgd-juso.svg") no-repeat center center;
 }
-/* line 238, jee.scss */
-#main #node-8, #main #node-8 a {
+/* line 251, jee.scss */
+#main #node-8.node-teaser, #main #node-8.node-teaser a {
   color: #0b7f8a;
 }
-/* line 239, jee.scss */
-#main #node-8 h2.node-title, #main #node-8 h2.node-title a {
+/* line 252, jee.scss */
+#main #node-8.node-teaser h2.node-title, #main #node-8.node-teaser h2.node-title a {
   color: #009aa8;
 }
-/* line 240, jee.scss */
-#main #node-8 .field-name-field-vignette {
+/* line 253, jee.scss */
+#main #node-8.node-teaser .field-name-field-vignette {
   background: transparent url("../assets/img/shadow-juso.png") no-repeat center center;
   background: none, url("../assets/img/shadow-juso.svg") no-repeat center center;
 }
-/* line 241, jee.scss */
-#main #node-8 .line {
+/* line 254, jee.scss */
+#main #node-8.node-teaser .line {
   background-color: #33b4b5;
 }
-/* line 251, jee.scss */
+/* line 265, jee.scss */
 #main .node-chapitre.node-teaser {
   z-index: 2;
   position: absolute;
@@ -4147,31 +4153,38 @@ div.messages {
    _/ // /|  / / / / /___/ _, _/ ___ / /___  / / _/ /  | |/ // /  / / / /___
   /___/_/ |_/ /_/ /_____/_/ |_/_/  |_\____/ /_/ /___/  |___/___/ /_/ /_____/
   */
-      /*
-       ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
-      |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
-      |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
-      |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|
+    /*
+     ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
+    |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
+    |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
+    |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|
 
-      */
+    */
   opacity: 1;
   -webkit-transition: 1s ease-out;
           transition: 1s ease-out;
   -webkit-transition-property: opacity;
           transition-property: opacity;
-      /*
-       _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
-      |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
-      |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
-      |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|
+    /*
+     _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
+    |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
+    |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
+    |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|
 
-      */
+    */
   /*
    _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ ____  _____
   |     |     |_   _|     |   __|  _  |_   _|   __|  |     |     |    \|   __|
   | | | |-   -| | | |-   -|  |  |     | | | |   __|  | | | |  |  |  |  |   __|
   |_|_|_|_____| |_| |_____|_____|__|__| |_| |_____|  |_|_|_|_____|____/|_____|
   */
+    /*
+     _____ _____ _____ _____ _____ _____ _____    ____  _____ _____ _____ __    _____ __ __ _____ ____
+    |     |  |  |  _  |  _  |_   _|   __| __  |  |    \|     |   __|  _  |  |  |  _  |  |  |   __|    \
+    |   --|     |     |   __| | | |   __|    -|  |  |  |-   -|__   |   __|  |__|     |_   _|   __|  |  |
+    |_____|__|__|__|__|__|    |_| |_____|__|__|  |____/|_____|_____|__|  |_____|__|__| |_| |_____|____/
+
+    */
   /*
      _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
     / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
@@ -4181,7 +4194,7 @@ div.messages {
                                                     |_|                                                                      /_/
   */
 }
-/* line 274, jee.scss */
+/* line 288, jee.scss */
 #main .node-chapitre.node-teaser h2.node-title {
   -webkit-transform: none;
       -ms-transform: none;
@@ -4195,11 +4208,11 @@ div.messages {
           transition-property: transform;
   z-index: 5;
 }
-/* line 281, jee.scss */
+/* line 295, jee.scss */
 #main .node-chapitre.node-teaser > .content {
   position: relative;
 }
-/* line 282, jee.scss */
+/* line 296, jee.scss */
 #main .node-chapitre.node-teaser .texts {
   opacity: 0;
   height: 1px;
@@ -4210,7 +4223,7 @@ div.messages {
           transition-property: opacity height;
   position: absolute;
 }
-/* line 288, jee.scss */
+/* line 302, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie {
   opacity: 0;
   position: absolute;
@@ -4219,12 +4232,12 @@ div.messages {
   -webkit-transition-property: opacity -webkit-transform;
           transition-property: opacity transform;
 }
-/* line 294, jee.scss */
+/* line 308, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) {
   z-index: 2;
   opacity: 1;
 }
-/* line 298, jee.scss */
+/* line 312, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-type-text {
   opacity: 0;
   -webkit-transition: 1s ease-out 0.9s;
@@ -4232,12 +4245,12 @@ div.messages {
   -webkit-transition-property: opacity;
           transition-property: opacity;
 }
-/* line 303, jee.scss */
+/* line 317, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-name-field-vignette {
   cursor: pointer;
   z-index: 2;
 }
-/* line 306, jee.scss */
+/* line 320, jee.scss */
 #main .node-chapitre.node-teaser:after {
   opacity: 0;
   -webkit-transition: 2s ease-in;
@@ -4249,11 +4262,11 @@ div.messages {
   bottom: 2px;
   right: 2px;
 }
-/* line 324, jee.scss */
+/* line 338, jee.scss */
 #main .node-chapitre.node-teaser.previewed {
   z-index: 100;
 }
-/* line 326, jee.scss */
+/* line 340, jee.scss */
 #main .node-chapitre.node-teaser.previewed:after {
   opacity: 1;
   top: 2em;
@@ -4261,40 +4274,44 @@ div.messages {
   right: -12em;
   bottom: -30em;
 }
-/* line 333, jee.scss */
+/* line 347, jee.scss */
 #main .node-chapitre.node-teaser.previewed h2.node-title {
   -webkit-transform: scale(2, 2);
       -ms-transform: scale(2, 2);
           transform: scale(2, 2);
 }
-/* line 334, jee.scss */
+/* line 348, jee.scss */
 #main .node-chapitre.node-teaser.previewed .texts {
   opacity: 1;
   height: 8em;
 }
-/* line 335, jee.scss */
+/* line 349, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-partie {
   opacity: 1;
   z-index: 0;
 }
-/* line 338, jee.scss */
+/* line 352, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field {
   opacity: 1;
   z-index: -1;
   cursor: default;
 }
-/* line 348, jee.scss */
+/* line 362, jee.scss */
 #main .node-chapitre.node-teaser.mitigated {
   opacity: 0.3;
 }
-/* line 361, jee.scss */
+/* line 373, jee.scss */
+.chapter-displayed #main .node-chapitre.node-teaser {
+  opacity: 0.1;
+}
+/* line 385, jee.scss */
 #main .node-chapitre.node-teaser:after {
   content: " ";
   background-size: contain !important;
   position: absolute;
   z-index: -1;
 }
-/* line 368, jee.scss */
+/* line 392, jee.scss */
 #main .node-chapitre.node-teaser h2.node-title {
   font-family: "epflulb";
   font-weight: normal;
@@ -4305,30 +4322,30 @@ div.messages {
   z-index: 5;
 }
 @media only screen and (min-width: 64.063em) {
-  /* line 368, jee.scss */
+  /* line 392, jee.scss */
   #main .node-chapitre.node-teaser h2.node-title {
     font-size: 1.3em;
   }
 }
 @media only screen and (min-width: 90.063em) {
-  /* line 368, jee.scss */
+  /* line 392, jee.scss */
   #main .node-chapitre.node-teaser h2.node-title {
     font-size: 1.8em;
   }
 }
-/* line 388, jee.scss */
+/* line 412, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre {
   min-width: 16em;
 }
-/* line 389, jee.scss */
+/* line 413, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 {
   display: none !important;
 }
-/* line 391, jee.scss */
+/* line 415, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre p {
   margin: 0;
 }
-/* line 395, jee.scss */
+/* line 419, jee.scss */
 #main .node-chapitre.node-teaser ul.links {
   display: block;
   margin: 0;
@@ -4337,11 +4354,11 @@ div.messages {
   position: relative;
   width: 100%;
 }
-/* line 397, jee.scss */
+/* line 421, jee.scss */
 #main .node-chapitre.node-teaser ul.links li.node-readmore {
   padding: 0;
 }
-/* line 399, jee.scss */
+/* line 423, jee.scss */
 #main .node-chapitre.node-teaser ul.links li.node-readmore a {
   display: inline-block;
   height: 25px;
@@ -4353,12 +4370,12 @@ div.messages {
   background: transparent url("../assets/img/readmore-btn.png") no-repeat right center;
   background: none, url("../assets/img/readmore-btn.svg") no-repeat right center;
 }
-/* line 412, jee.scss */
+/* line 436, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie {
   clear: both;
   padding-top: 1em;
 }
-/* line 416, jee.scss */
+/* line 440, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-vignette {
   position: relative;
   float: left;
@@ -4369,28 +4386,28 @@ div.messages {
   margin-left: 0;
   background-size: contain;
 }
-/* line 429, jee.scss */
+/* line 453, jee.scss */
 #main .node-chapitre.node-teaser .field-type-text {
   min-width: 16em;
 }
-/* line 430, jee.scss */
+/* line 454, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-titre {
   font-family: "epflul";
   font-size: 1.6em;
   line-height: 1.1;
 }
-/* line 435, jee.scss */
+/* line 459, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-sous-titre {
   font-family: "epflul";
   font-size: 1.4em;
   line-height: 1.2;
 }
-/* line 440, jee.scss */
+/* line 464, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-description {
   font-size: 0.88em;
   line-height: 1.2;
 }
-/* line 446, jee.scss */
+/* line 470, jee.scss */
 #main .node-chapitre.node-teaser .line {
   z-index: -1;
   position: absolute;
@@ -4402,13 +4419,177 @@ div.messages {
   width: 2px;
   opacity: 0.4;
 }
-/* line 457, jee.scss */
-#main .chapter-wrapper {
+/* line 489, jee.scss */
+#main #chapter-wrapper {
   position: absolute;
   top: 0;
   left: 0;
-  bottom: 0;
-  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0;
+  -webkit-transition: 2s ease-out;
+          transition: 2s ease-out;
+  -webkit-transition-property: opacity;
+          transition-property: opacity;
+}
+/* line 498, jee.scss */
+#main #chapter-wrapper.visible {
+  opacity: 1;
+  z-index: 500;
+  /*
+   _____ _____ __    _____ _____ _____    _____ __ __    _____ _____ ____  _____
+  |     |     |  |  |     | __  |   __|  | __  |  |  |  |   | |     |    \|   __|
+  |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
+  |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
+  */
+  /*
+   _____ _____ _____ _____ _____ _____ _____ _____ _____
+  |   __|   __|   | |   __| __  |     |     |  |  |   __|
+  |  |  |   __| | | |   __|    -|-   -|  |  |  |  |   __|
+  |_____|_____|_|___|_____|__|__|_____|__  _|_____|_____|
+                                         |__|
+  */
+}
+/* line 509, jee.scss */
+#main #chapter-wrapper.visible #node-2 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-2 h2.node-title,
+#main #chapter-wrapper.visible #node-2 .field-name-field-dbatre li:before {
+  color: #ea5b0c;
+}
+/* line 516, jee.scss */
+#main #chapter-wrapper.visible #node-3 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-3 h2.node-title,
+#main #chapter-wrapper.visible #node-3 .field-name-field-dbatre li:before {
+  color: #cecd00;
+}
+/* line 523, jee.scss */
+#main #chapter-wrapper.visible #node-4 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-4 h2.node-title,
+#main #chapter-wrapper.visible #node-4 .field-name-field-dbatre li:before {
+  color: #de003a;
+}
+/* line 530, jee.scss */
+#main #chapter-wrapper.visible #node-5 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-5 h2.node-title,
+#main #chapter-wrapper.visible #node-5 .field-name-field-dbatre li:before {
+  color: #0066b1;
+}
+/* line 537, jee.scss */
+#main #chapter-wrapper.visible #node-6 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-6 h2.node-title,
+#main #chapter-wrapper.visible #node-6 .field-name-field-dbatre li:before {
+  color: #af1380;
+}
+/* line 544, jee.scss */
+#main #chapter-wrapper.visible #node-7 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-7 h2.node-title,
+#main #chapter-wrapper.visible #node-7 .field-name-field-dbatre li:before {
+  color: #62a530;
+}
+/* line 551, jee.scss */
+#main #chapter-wrapper.visible #node-8 .field-type-text-long .field-label,
+#main #chapter-wrapper.visible #node-8 h2.node-title,
+#main #chapter-wrapper.visible #node-8 .field-name-field-dbatre li:before {
+  color: #33b4b5;
+}
+/* line 567, jee.scss */
+#main #chapter-wrapper .node {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+/* line 570, jee.scss */
+#main #chapter-wrapper .node a {
+  color: inherit;
+}
+/* line 573, jee.scss */
+#main #chapter-wrapper .node-title {
+  font-family: "epflulb";
+  font-weight: normal;
+  text-transform: uppercase;
+  text-align: center;
+  max-width: 8.5em;
+  line-height: 0.85;
+  font-size: 2.268em;
+}
+/* line 583, jee.scss */
+#main #chapter-wrapper .node > .field {
+  position: absolute;
+}
+/* line 587, jee.scss */
+#main #chapter-wrapper .field-type-text-long {
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 23em;
+  padding: 1em;
+  z-index: 10;
+}
+/* line 592, jee.scss */
+#main #chapter-wrapper .field-type-text-long .field-label {
+  text-transform: uppercase;
+  font-family: "epflulb";
+  font-size: 1.5em;
+}
+/* line 598, jee.scss */
+#main #chapter-wrapper .field-type-text-long h2 {
+  font-size: 0.88em;
+}
+/* line 601, jee.scss */
+#main #chapter-wrapper .field-type-text-long p {
+  font-size: 0.88em;
+  margin-bottom: 0.5em;
+}
+/* line 606, jee.scss */
+#main #chapter-wrapper .field-name-field-dbatre {
+  left: 60em;
+}
+/* line 608, jee.scss */
+#main #chapter-wrapper .field-name-field-dbatre ul {
+  margin-left: 1em;
+}
+/* line 610, jee.scss */
+#main #chapter-wrapper .field-name-field-dbatre ul li {
+  list-style: none;
+  line-height: 1;
+  margin-bottom: 1em;
+  position: relative;
+}
+/* line 615, jee.scss */
+#main #chapter-wrapper .field-name-field-dbatre ul li:before {
+  content: "?";
+  position: absolute;
+  top: 0;
+  left: -1em;
+  font-family: "epflul";
+}
+/* line 626, jee.scss */
+#main #chapter-wrapper .field-name-field-partie {
+  height: 60%;
+  width: 100%;
+  top: 20%;
+  left: 0;
+}
+/* line 629, jee.scss */
+#main #chapter-wrapper .field-name-field-partie .field-items {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: auto;
+}
+/* line 634, jee.scss */
+#main #chapter-wrapper .field-name-field-partie .field-items .field {
+  position: relative;
+  display: inline-block;
+}
+/* line 637, jee.scss */
+#main #chapter-wrapper .field-name-field-partie .field-items .field .mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10;
 }
 
 /*  __________  ____  ________________
@@ -4417,13 +4598,13 @@ div.messages {
  / __/ / /_/ / /_/ / / / / /___/ _, _/
 /_/    \____/\____/ /_/ /_____/_/ |_|
 */
-/* line 470, jee.scss */
+/* line 656, jee.scss */
 #footer {
   position: fixed;
   bottom: 0;
   right: 0;
 }
-/* line 473, jee.scss */
+/* line 659, jee.scss */
 #footer .block {
   display: inline-block;
   vertical-align: top;
@@ -4436,7 +4617,7 @@ div.messages {
  / /  / // / ___/ / /___
 /_/  /_/___//____/\____/
 */
-/* line 485, jee.scss */
+/* line 671, jee.scss */
 #fullscreen-btn {
   position: fixed;
   top: 20px;
@@ -4444,7 +4625,7 @@ div.messages {
   z-index: 1000;
 }
 
-/* line 499, jee.scss */
+/* line 685, jee.scss */
 .bubble-1 {
   position: absolute;
   z-index: 0;
@@ -4457,7 +4638,7 @@ div.messages {
   left: -200px;
 }
 
-/* line 503, jee.scss */
+/* line 689, jee.scss */
 .bubble-2 {
   position: absolute;
   z-index: 0;
@@ -4470,7 +4651,7 @@ div.messages {
   right: -400px;
 }
 
-/* line 508, jee.scss */
+/* line 694, jee.scss */
 .star {
   position: absolute;
   z-index: 0;
@@ -4488,7 +4669,7 @@ div.messages {
  / /_/ / /___/ /_/ / /_/ / /_/ /
 /_____/_____/_____/\____/\____/
 */
-/* line 522, jee.scss */
+/* line 708, jee.scss */
 #fps {
   position: fixed;
   top: 20px;
@@ -4496,7 +4677,7 @@ div.messages {
   z-index: 1000;
 }
 
-/* line 528, jee.scss */
+/* line 714, jee.scss */
 #nav-cursor {
   position: absolute;
   width: 6px;

sites/all/themes/gui/jee/css/jee.scss

@@ -186,59 +186,73 @@ div.messages{
   */
   //SOL
   #node-2{
-    &::after{ @include bg-svg-png('bgd-sol');}
-    &, a{color:$SOL-col-txt;}
-    h2.node-title{&,a{color:$SOL-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-sol');}
-    .line{background-color:$SOL-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-sol');}
+      &, a{color:$SOL-col-txt;}
+      h2.node-title{&,a{color:$SOL-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-sol');}
+      .line{background-color:$SOL-col-active;}
+    }
   }
   //DPH
   #node-3{
-    &::after{ @include bg-svg-png('bgd-dph');}
-    &, a{color:$DPH-col-txt;}
-    h2.node-title{&,a{color:$DPH-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-dph');}
-    .line{background-color:$DPH-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-dph');}
+      &, a{color:$DPH-col-txt;}
+      h2.node-title{&,a{color:$DPH-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-dph');}
+      .line{background-color:$DPH-col-active;}
+    }
   }
   // SUB
   #node-4{
-    &::after{ @include bg-svg-png('bgd-sub');}
-    &, a{color:$SUB-col-txt;}
-    h2.node-title{&,a{color:$SUB-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-sub');}
-    .line{background-color:$SUB-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-sub');}
+      &, a{color:$SUB-col-txt;}
+      h2.node-title{&,a{color:$SUB-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-sub');}
+      .line{background-color:$SUB-col-active;}
+    }
   }
   // BC
   #node-5{
-    &::after{ @include bg-svg-png('bgd-bc');}
-    &, a{color:$BC-col-txt;}
-    h2.node-title{&,a{color:$BC-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-bc');}
-    .line{background-color:$BC-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-bc');}
+      &, a{color:$BC-col-txt;}
+      h2.node-title{&,a{color:$BC-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-bc');}
+      .line{background-color:$BC-col-active;}
+    }
   }
   //OPP
   #node-6{
-    &::after{ @include bg-svg-png('bgd-opp');}
-    &, a{color:$OPP-col-txt;}
-    h2.node-title{&,a{color:$OPP-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-opp');}
-    .line{background-color:$OPP-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-opp');}
+      &, a{color:$OPP-col-txt;}
+      h2.node-title{&,a{color:$OPP-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-opp');}
+      .line{background-color:$OPP-col-active;}
+    }
   }
   //DUB
   #node-7{
-    &::after{ @include bg-svg-png('bgd-dub');}
-    &, a{color:$DUB-col-txt;}
-    h2.node-title{&,a{color:$DUB-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-dub');}
-    .line{background-color:$DUB-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-dub');}
+      &, a{color:$DUB-col-txt;}
+      h2.node-title{&,a{color:$DUB-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-dub');}
+      .line{background-color:$DUB-col-active;}
+    }
   }
   // JUSO
   #node-8{
-    &::after{ @include bg-svg-png('bgd-juso');}
-    &, a{color:$JUSO-col-txt;}
-    h2.node-title{&,a{color:$JUSO-color;}}
-    .field-name-field-vignette{@include bg-svg-png('shadow-juso');}
-    .line{background-color:$JUSO-col-active;}
+    &.node-teaser{
+      &::after{ @include bg-svg-png('bgd-juso');}
+      &, a{color:$JUSO-col-txt;}
+      h2.node-title{&,a{color:$JUSO-color;}}
+      .field-name-field-vignette{@include bg-svg-png('shadow-juso');}
+      .line{background-color:$JUSO-col-active;}
+    }
   }
 
 /*
@@ -250,215 +264,387 @@ div.messages{
 */
   .node-chapitre.node-teaser{
     z-index: 2;
-      position:absolute;
+    position:absolute;
 
-      /*
-          _____   __________________  ___   _________________    __________________
-         /  _/ | / /_  __/ ____/ __ \/   | / ____/_  __/  _/ |  / /  _/_  __/ ____/
-         / //  |/ / / / / __/ / /_/ / /| |/ /     / /  / / | | / // /  / / / __/
-       _/ // /|  / / / / /___/ _, _/ ___ / /___  / / _/ /  | |/ // /  / / / /___
-      /___/_/ |_/ /_/ /_____/_/ |_/_/  |_\____/ /_/ /___/  |___/___/ /_/ /_____/
-      */
-
-      /*
-       ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
-      |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
-      |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
-      |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|
-
-      */
-      opacity:1;
+    /*
+        _____   __________________  ___   _________________    __________________
+       /  _/ | / /_  __/ ____/ __ \/   | / ____/_  __/  _/ |  / /  _/_  __/ ____/
+       / //  |/ / / / / __/ / /_/ / /| |/ /     / /  / / | | / // /  / / / __/
+     _/ // /|  / / / / /___/ _, _/ ___ / /___  / / _/ /  | |/ // /  / / / /___
+    /___/_/ |_/ /_/ /_____/_/ |_/_/  |_\____/ /_/ /___/  |___/___/ /_/ /_____/
+    */
+
+    /*
+     ____  _____ _____ _____ _____ __  _____    _____ _____ ____  _____
+    |    \|   __|   __|  _  |  |  |  ||_   _|  |     |     |    \|   __|
+    |  |  |   __|   __|     |  |  |  |__| |    | | | |  |  |  |  |   __|
+    |____/|_____|__|  |__|__|_____|_____|_|    |_|_|_|_____|____/|_____|
+
+    */
+    opacity:1;
+    transition:1s ease-out;
+    transition-property:opacity;
+
+    h2.node-title{
+      transform:none;
+      transform-origin:bottom center;
       transition:1s ease-out;
-      transition-property:opacity;
-
-      h2.node-title{
-        transform:none;
-        transform-origin:bottom center;
-        transition:1s ease-out;
-        transition-property:transform;
-        z-index:5;
-      }
-      >.content{position:relative;}
-      .texts{
-        opacity:0; height:1px; overflow:hidden;
-        transition:1s ease-out;
-        transition-property:opacity height;
+      transition-property:transform;
+      z-index:5;
+    }
+    >.content{position:relative;}
+    .texts{
+      opacity:0; height:1px; overflow:hidden;
+      transition:1s ease-out;
+      transition-property:opacity height;
+      position:absolute;
+    }
+    .field-name-field-partie{
+        opacity:0;
         position:absolute;
-      }
-      .field-name-field-partie{
-          opacity:0;
-          position:absolute;
-          transition:1s ease-in-out 0.1s;
-          transition-property: opacity transform;
-          // just let see the field vignette of first partie
-          &:nth-child(2){
-            z-index:2;
-            opacity:1;
-            // transition-delay:0;
-            >.field-type-text{
-              opacity:0;
-              transition:1s ease-out 0.9s;
-              transition-property: opacity;
-            }
-            >.field-name-field-vignette{cursor:pointer;z-index:2;}
+        transition:1s ease-in-out 0.1s;
+        transition-property: opacity transform;
+        // just let see the field vignette of first partie
+        &:nth-child(2){
+          z-index:2;
+          opacity:1;
+          // transition-delay:0;
+          >.field-type-text{
+            opacity:0;
+            transition:1s ease-out 0.9s;
+            transition-property: opacity;
           }
-      }
+          >.field-name-field-vignette{cursor:pointer;z-index:2;}
+        }
+    }
+    &:after{
+      opacity:0;
+      transition: 2s ease-in;
+      transition-property:opacity;
+      top:1px; left:1px; bottom:2px; right:2px;
+    }
+    .line{
+      // transition: 0.1s ease-out;
+      // transition-property:height transform;
+    }
+
+    /*
+     _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
+    |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
+    |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
+    |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|
+
+    */
+    &.previewed{
+      z-index:100;
       &:after{
-        opacity:0;
-        transition: 2s ease-in;
-        transition-property:opacity;
-        top:1px; left:1px; bottom:2px; right:2px;
+        opacity:1;
+        $pad:-2em;
+        top:-$pad;
+        left:$pad*6; right:$pad*6;
+        bottom:$pad*15;
       }
-      .line{
-        // transition: 0.1s ease-out;
-        // transition-property:height transform;
+      h2.node-title{transform:scale(2,2);}
+      .texts{opacity:1; height:8em;}
+      .field-name-field-partie{
+        opacity:1; z-index:0;
+        // display all fields inside each parties
+        >.field{opacity:1; z-index:-1; cursor:default;}
       }
+    }
 
-      /*
-       _____ _____ _____ _____ _____ _____ _ _ _    _____ _____ ____  _____
-      |  _  | __  |   __|  |  |     |   __| | | |  |     |     |    \|   __|
-      |   __|    -|   __|  |  |-   -|   __| | | |  | | | |  |  |  |  |   __|
-      |__|  |__|__|_____|\___/|_____|_____|_____|  |_|_|_|_____|____/|_____|
+    /*
+     _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ ____  _____
+    |     |     |_   _|     |   __|  _  |_   _|   __|  |     |     |    \|   __|
+    | | | |-   -| | | |-   -|  |  |     | | | |   __|  | | | |  |  |  |  |   __|
+    |_|_|_|_____| |_| |_____|_____|__|__| |_| |_____|  |_|_|_|_____|____/|_____|
+    */
+    &.mitigated{
+      opacity:0.3;
+    }
 
-      */
-      &.previewed{
-        z-index:100;
-        &:after{
-          opacity:1;
-          $pad:-2em;
-          top:-$pad;
-          left:$pad*6; right:$pad*6;
-          bottom:$pad*15;
-        }
-        h2.node-title{transform:scale(2,2);}
-        .texts{opacity:1; height:8em;}
-        .field-name-field-partie{
-          opacity:1; z-index:0;
-          // display all fields inside each parties
-          >.field{opacity:1; z-index:-1; cursor:default;}
-        }
-      }
+    /*
+     _____ _____ _____ _____ _____ _____ _____    ____  _____ _____ _____ __    _____ __ __ _____ ____
+    |     |  |  |  _  |  _  |_   _|   __| __  |  |    \|     |   __|  _  |  |  |  _  |  |  |   __|    \
+    |   --|     |     |   __| | | |   __|    -|  |  |  |-   -|__   |   __|  |__|     |_   _|   __|  |  |
+    |_____|__|__|__|__|__|    |_| |_____|__|__|  |____/|_____|_____|__|  |_____|__|__| |_| |_____|____/
 
-      /*
-       _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ ____  _____
-      |     |     |_   _|     |   __|  _  |_   _|   __|  |     |     |    \|   __|
-      | | | |-   -| | | |-   -|  |  |     | | | |   __|  | | | |  |  |  |  |   __|
-      |_|_|_|_____| |_| |_____|_____|__|__| |_| |_____|  |_|_|_|_____|____/|_____|
-      */
-      &.mitigated{
-        opacity:0.3;
-      }
+    */
+    .chapter-displayed & {
+      opacity:0.1;
+    }
 
+    /*
+       _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
+      / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
+     / / __/ __/ /  |/ / __/ / /_/ / /| | / /   \__ \   / // __ \/ __ \/ __ \   / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
+    / /_/ / /___/ /|  / /___/ _, _/ ___ |/ /______/ /  / // / / / /_/ / / / /  / / / / / /_/  __/ /  / /_/ / /__/ /_/ /| |/ /  __// /
+    \____/_____/_/ |_/_____/_/ |_/_/  |_/_____/____/  / //_/ /_/\____/_/ /_/  /_/_/ /_/\__/\___/_/   \__,_/\___/\__/_/ |___/\___//_/
+                                                      |_|                                                                      /_/
+    */
+    &:after{ // background
+      content:" ";
+      background-size:contain!important;
+      position:absolute;
+      z-index:-1;
+    }
 
-      /*
-         _____________   ____________  ___    __   _____     __                     _       __                       __  _            _
-        / ____/ ____/ | / / ____/ __ \/   |  / /  / ___/   _/_/___  ____  ____     (_)___  / /____  _________ ______/ /_(_)   _____  | |
-       / / __/ __/ /  |/ / __/ / /_/ / /| | / /   \__ \   / // __ \/ __ \/ __ \   / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
-      / /_/ / /___/ /|  / /___/ _, _/ ___ |/ /______/ /  / // / / / /_/ / / / /  / / / / / /_/  __/ /  / /_/ / /__/ /_/ /| |/ /  __// /
-      \____/_____/_/ |_/_____/_/ |_/_/  |_/_____/____/  / //_/ /_/\____/_/ /_/  /_/_/ /_/\__/\___/_/   \__,_/\___/\__/_/ |___/\___//_/
-                                                        |_|                                                                      /_/
-      */
-      &:after{ // background
-        content:" ";
-        background-size:contain!important;
-        position:absolute;
-        z-index:-1;
+    h2.node-title{
+      font-family: "epflulb";
+      font-weight:normal;
+      text-transform: uppercase;
+      text-align: center;
+      max-width: 8.5em;
+      line-height: 0.85;
+      @media #{$large-up} {
+        font-size: 1.3em;
       }
-
-      h2.node-title{
-        font-family: "epflulb";
-        font-weight:normal;
-        text-transform: uppercase;
-        text-align: center;
-        max-width: 8.5em;
-        line-height: 0.85;
-        @media #{$large-up} {
-          font-size: 1.3em;
-        }
-        @media #{$xlarge-up} {
-          font-size:1.8em;
-        }
-        z-index: 5;
+      @media #{$xlarge-up} {
+        font-size:1.8em;
       }
+      z-index: 5;
+    }
 
-      .texts{
-        // position:relative;
-      }
+    .texts{
+      // position:relative;
+    }
 
-      .field-name-field-comprendre{
-        h1,h2,h3,h4,h5,h6{display:none!important;}
-        // max-width:15em;
-        p{margin:0;}
-        min-width:16em;
-      }
+    .field-name-field-comprendre{
+      h1,h2,h3,h4,h5,h6{display:none!important;}
+      // max-width:15em;
+      p{margin:0;}
+      min-width:16em;
+    }
 
-      ul.links{
-        display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
-        li.node-readmore{
-          padding:0;
-          a{
-            display:inline-block;
-            height:25px;
-            font-family: "open_sans";
-            font-weight: 900;
-            color:#000!important;
-            width:8em; text-align: left;
-            // background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
-            @include bg-svg-png('readmore-btn', no-repeat, right, center);
-          }
+    ul.links{
+      display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
+      li.node-readmore{
+        padding:0;
+        a{
+          display:inline-block;
+          height:25px;
+          font-family: "open_sans";
+          font-weight: 900;
+          color:#000!important;
+          width:8em; text-align: left;
+          // background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
+          @include bg-svg-png('readmore-btn', no-repeat, right, center);
         }
       }
+    }
 
-      .field-name-field-partie{clear:both; padding-top:1em;}
+    .field-name-field-partie{clear:both; padding-top:1em;}
 
 
+    $shadow-size:3.5em;
+    .field-name-field-vignette{
+      position:relative;
+      float:left;
       $shadow-size:3.5em;
-      .field-name-field-vignette{
-        position:relative;
-        float:left;
-        $shadow-size:3.5em;
-        padding:$shadow-size;
-        margin-top:-$shadow-size*1.15;
-        margin-right:-$shadow-size+1.5em;
-        margin-bottom:0;
-        margin-left:0;
-        background-size: contain;
-        // background-repeat: no-repeat;
-        // background-origin: center center;
+      padding:$shadow-size;
+      margin-top:-$shadow-size*1.15;
+      margin-right:-$shadow-size+1.5em;
+      margin-bottom:0;
+      margin-left:0;
+      background-size: contain;
+      // background-repeat: no-repeat;
+      // background-origin: center center;
+    }
+    .field-type-text{ min-width:16em; }
+    .field-name-field-titre{
+      font-family: "epflul";
+      font-size:1.6em;
+      line-height:1.1;
+    }
+    .field-name-field-sous-titre{
+      font-family: "epflul";
+      font-size:1.4em;
+      line-height:1.2;
+    }
+    .field-name-field-description{
+      // font-family: "epf-lul";
+      font-size:0.88em;
+      line-height:1.2;
+    }
+
+    .line{
+      z-index:-1;
+      position:absolute;
+      top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
+      transform-origin:top left;
+      width:2px; //background-color:red;
+      opacity:0.4;
+    }
+
+  } // node-chapitre
+
+
+/* ____  ____  _______   ____________     ________  _____    ____  ________________  _____
+  / __ \/ __ \/ ____/ | / / ____/ __ \   / ____/ / / /   |  / __ \/_  __/ ____/ __ \/ ___/
+ / / / / /_/ / __/ /  |/ / __/ / / / /  / /   / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
+/ /_/ / ____/ /___/ /|  / /___/ /_/ /  / /___/ __  / ___ |/ ____/ / / / /___/ _, _/___/ /
+\____/_/   /_____/_/ |_/_____/_____/   \____/_/ /_/_/  |_/_/     /_/ /_____/_/ |_|/____/
+*/
+
+  #chapter-wrapper{
+    position:absolute;
+    top:0; left:0;
+    width:100%; height:100%;
+    z-index: -1;
+    opacity:0;
+    transition:2s ease-out;
+    transition-property:opacity;
+
+    &.visible{
+      opacity:1;
+      z-index: 500;
+    /*
+     _____ _____ __    _____ _____ _____    _____ __ __    _____ _____ ____  _____
+    |     |     |  |  |     | __  |   __|  | __  |  |  |  |   | |     |    \|   __|
+    |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
+    |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
+    */
+
+    #node-2{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$SOL-col-active;
       }
-      .field-type-text{ min-width:16em; }
-      .field-name-field-titre{
-        font-family: "epflul";
-        font-size:1.6em;
-        line-height:1.1;
+    }
+    #node-3{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$DPH-col-active;
       }
-      .field-name-field-sous-titre{
-        font-family: "epflul";
-        font-size:1.4em;
-        line-height:1.2;
+    }
+    #node-4{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$SUB-col-active;
       }
-      .field-name-field-description{
-        // font-family: "epf-lul";
-        font-size:0.88em;
-        line-height:1.2;
+    }
+    #node-5{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$BC-col-active;
+      }
+    }
+    #node-6{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$OPP-col-active;
       }
+    }
+    #node-7{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$DUB-col-active;
+      }
+    }
+    #node-8{
+      .field-type-text-long .field-label,
+      h2.node-title,
+      .field-name-field-dbatre li:before{
+        color:$JUSO-col-active;
+      }
+    }
 
-      .line{
-        z-index:-1;
-        position:absolute;
-        top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
-        transform-origin:top left;
-        width:2px; //background-color:red;
-        opacity:0.4;
+    /*
+     _____ _____ _____ _____ _____ _____ _____ _____ _____
+    |   __|   __|   | |   __| __  |     |     |  |  |   __|
+    |  |  |   __| | | |   __|    -|-   -|  |  |  |  |   __|
+    |_____|_____|_|___|_____|__|__|_____|__  _|_____|_____|
+                                           |__|
+    */
       }
 
-  } // node-chapitre
+    .node{
+      position:relative;
+      height:100%; width:100%;
+      a{color:inherit;}
+    }
 
-  .chapter-wrapper{
-    position:absolute;
-    top:0; left:0; bottom:0; right:0;
-  }
-} // main
+    .node-title{
+      font-family: "epflulb";
+      font-weight:normal;
+      text-transform: uppercase;
+      text-align: center;
+      max-width: 8.5em;
+      line-height: 0.85;
+      font-size: 2.268em;
+    }
+
+    .node>.field{
+      position:absolute;
+    }
+
+    .field-type-text-long{
+      background-color: rgba(255,255,255,0.9);
+      width:23em; padding:1em;
+      z-index:10;
+
+      .field-label{
+        text-transform: uppercase;
+        font-family: "epflulb";
+        font-size:1.5em;
+      }
+
+      h2{
+        font-size:0.88em;
+      }
+      p{
+        font-size: 0.88em;
+        margin-bottom:0.5em;
+      }
+    }
+    .field-name-field-dbatre{
+      left:60em;
+      ul{
+        margin-left:1em;
+        li{
+          list-style: none;
+          line-height:1;
+          margin-bottom: 1em;
+          position:relative;
+          &:before{
+            content:"?";
+            position:absolute;
+            top:0; left:-1em;
+            font-family: "epflul";
+          }
+        }
+      }
+    }
+
+
+    .field-name-field-partie{
+      height:60%; width:100%;
+      top:20%; left:0;
+      .field-items{
+       position:relative;
+       top:0; left:0;
+       height:100%; width:auto;
+       // overflow:hidden;
+        .field{
+          position:relative;
+          display:inline-block;
+          .mask{
+            position:absolute;
+            width:100%; height:100%;
+            top:0; left:0;
+            z-index:10;
+          }
+        }
+      }
+    }
+  } // #chapter-wrapper
+} // #main
 
 /*  __________  ____  ________________
    / ____/ __ \/ __ \/_  __/ ____/ __ \
@@ -531,4 +717,4 @@ div.messages{
   margin-top: -3px; margin-left: -3px;
   background-color: red;
   z-index:1000;
-}
+}

sites/all/themes/gui/jee/jee.info

@@ -7,10 +7,12 @@ core = "7.x"
 engine = "phptemplate"
 
 ;----------// Styles
+stylesheets[all][] = "bower_components/Peppermint/dist/peppermint.required.css"
 stylesheets[all][] = "css/jee.css"
 
 ;----------// Scripts
-scripts[] = "bower_components/jquery.transit/jquery.transit.js"
+scripts[] = "bower_components/jquery.pep/src/jquery.pep.js"
+scripts[] = "bower_components/Peppermint/dist/peppermint.min.js"
 scripts[] = "js/jee.js"
 
 ;----------// Regions

sites/all/themes/gui/jee/js/jee.js

@@ -35,6 +35,9 @@ jQuery(document).ready(function($) {
       _fps = 1000/12,
       _dragging = false, _timeout_dragging;
 
+  var _$chapter_wrapper = $('<div>').attr('id', 'chapter-wrapper').appendTo(_$container),
+      _loaded_chapter = false;
+
   var _bubbles = new Array(),
       _stars = new Array();
 
@@ -46,17 +49,17 @@ jQuery(document).ready(function($) {
     initChapters();
     launchNav();
 
+    // FULL SCREEN
     var $fullscreenBtn = $('<div>enter</div>').attr('id','fullscreen-btn').appendTo("#root");
-    // Launch fullscreen for browsers that support it!
-    $fullscreenBtn.on('click', function(e){
-      // launchIntoFullscreen(document.documentElement); // the whole page
-      launchIntoFullscreen(document.getElementById("root")); // any individual element
-    });
+    $fullscreenBtn.on('click', onFullScreen);
+
 
+    // create bubbles
     for (var i = 2; i > 0; i--) {
       _bubbles.push($('<div>').addClass('bubble bubble-'+i).prependTo(_$container));
     };
 
+    // create stars
     for (var i = 20; i > 0; i--) {
       _stars.push(
         $('<div>')
@@ -116,15 +119,19 @@ jQuery(document).ready(function($) {
       |____/|_____|_____|__|__| |_| |_____|__|     |_____|\___/|_____|_|___| |_| |_____|
       */
       .bind('mousedown', function(e){
-        console.log('mousedown');
+        console.log('document mousedown');
         clearTimeout(_timeout_dragging);
+
+        if(_loaded_chapter)
+          return false;
+
         // set initial cursor pos
         _mouse_down_pos.x = e.clientX;
         _mouse_down_pos.y = e.clientY;
         updateNavPos(e.clientX, e.clientY, true);
 
         $(this).bind('mousemove', function(e){
-          console.log('mousemove');
+          console.log('document mousemove');
           updateNavPos(e.clientX, e.clientY, false);
         });
 
@@ -135,9 +142,14 @@ jQuery(document).ready(function($) {
         }
       })
       .bind('mouseup', function(e){
-        console.log('mouseup');
+        console.log('document mouseup');
+
+        if(_loaded_chapter)
+          return false;
+
         stopMoveNav();
         $(this).unbind('mousemove');
+
         // close all preview
         if(Math.abs(e.clientX - _mouse_down_pos.x) < 2
           && Math.abs(e.clientY - _mouse_down_pos.y) < 2)
@@ -150,7 +162,7 @@ jQuery(document).ready(function($) {
         | | |  |  |  |  |   --|     |  |   __|  |  |   __| | | | | | |__   |
         |_| |_____|_____|_____|__|__|  |_____|\___/|_____|_|___| |_| |_____|
       */
-      .bind('touchstart', function(e){
+      .bind('document touchstart', function(e){
         console.log('touchstart');
         clearTimeout(_timeout_dragging);
         // set initial pos
@@ -163,11 +175,11 @@ jQuery(document).ready(function($) {
         }
       })
       .bind('touchmove', function(e){
-        console.log('touchmove');
+        console.log('document touchmove');
         updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
       })
       .bind('touchend', function(e){
-        console.log("touchend");
+        console.log("document touchend");
         stopMoveNav();
       });
   };
@@ -256,6 +268,11 @@ jQuery(document).ready(function($) {
     stopMoveNav();
   };
 
+  function onFullScreen(e){
+    launchIntoFullscreen(document.getElementById("root"));
+    if(_loaded_chapter)
+      setTimeout(_loaded_chapter.buildVideos(), 100);
+  };
   /*
      ________                __
     / ____/ /_  ____ _____  / /____  _____
@@ -295,6 +312,13 @@ jQuery(document).ready(function($) {
     this.linesAnimeStartTime = 0,
     this.linesAnimeDuration = 2000; // milli sec
 
+    // chapter
+    this.$n = false;
+    this.$blocks = false;
+    this.$vids = false;
+    this.texts_pos = shuffleArray([1,2,3]);
+    this.dimvideo = {w:0, h:0};
+
     // prototypes
     if (typeof Chapter.initialized == "undefined") {
 
@@ -376,8 +400,8 @@ jQuery(document).ready(function($) {
         //   )
         // ));
 
-        if(this.i === 0)
-          console.log(this.i+" this.trans.z", this.trans.z);
+        // if(this.i === 0)
+        //   console.log(this.i+" this.trans.z", this.trans.z);
 
         this.$e.css({
           transform:'translate3d('+this.trans.x+'px,'+this.trans.y+'px,0)'
@@ -526,16 +550,119 @@ jQuery(document).ready(function($) {
         $.getJSON(
           '/jee/chapter/'+this.nid,
           {},
-          this.displayNode
+          this.nodeLoaded.bind(this)
         );
+        _$body.addClass('chapter-displayed');
+      };
+
+      Chapter.prototype.nodeLoaded = function(json, textstatus){
+        console.log('Chapter :: nodeLoaded '+this.nid+' : json', json);
+
+        // insert ajax loaded into dom
+        _$chapter_wrapper.html(json.node);
+
+        // record some usefull data
+        this.$n = $('.node-chapitre', _$chapter_wrapper);
+        this.$blocks = $('.field-type-text-long', this.$n);
+        this.$vids = $('.field-name-field-partie', this.$n);
+
+        // record the current loaded chapter
+        // this will stop first interface to run
+        _loaded_chapter = this;
+
+        // wait to build correct display of chapter
+        setTimeout(this.displayNode.bind(this), 100);
+      };
+
+      Chapter.prototype.displayNode = function(){
+        console.log('Chapter :: displayNode '+this.nid);
+
+        // place text blocks
+        this.texts_pos = shuffleArray([1,2,3]);
+        this.$blocks
+          .each(this.placeText.bind(this))
+          .pep({
+            allowDragEventPropagation:false,
+            disableSelect:true,
+            velocityMultiplier:1
+          });
+
+        // build video player
+        this.buildVideos();
+
+        $('.node-title', this.$n).pep();
+
+        // show the whole thing
+        _$chapter_wrapper.addClass('visible');
       };
 
-      Chapter.prototype.displayNode = function(json, textstatus){
-        console.log('Chapter :: displayNode : json', json);
+      Chapter.prototype.placeText = function(i, e){
+        // console.log("Chapter :: placeText", e);
+        switch(this.texts_pos[i]){
+          case 1: // top right
+            $(e)
+              .css({
+                top:randB(_container.h*0.05-$(e).height(),_container.h*0.15-$(e).height()),
+                left:randB(_container.w*0.8-$(e).width(),_container.w*0.9-$(e).width())
+              })
+              // .pep({debug:true, startPos:{bottom:randB(80,90),right:randB(80,90)}})
+              .find('.field-label')
+                .appendTo(e);
+          break;
+          case 2: // bottom left
+            $(e).css({
+              top:randB(_container.h*0.8,_container.h*0.9),
+              left:randB(_container.w*0.1,_container.w*0.2)
+            });
+            // $(e).pep({debug:true, startPos:{top:randB(80,90),left:randB(10,30)}});
+          break;
+          case 3: // bottom right
+            $(e).css({
+              top:randB(_container.h*0.8,_container.h*0.9),
+              left:randB(_container.w*0.7,_container.w*0.9-$(e).width())
+            });
+            // $(e).pep({debug:true, startPos:{top:randB(80,90),right:randB(10,30)}});
+          break;
+        }
+      };
+
+      Chapter.prototype.buildVideos = function(){
+        console.log('Chapter :: buildVideos');
+
+        this.dimvideo.h = this.$vids.height();
+
+        // redim each iframe to fit
+        // add a mask on top of each iframe to avoid bad interaction with vimeo
+        $('iframe', this.$vids)
+          .each(this.redimVideo.bind(this))
+          .after('<div class="mask"></div>');
+
+        this.$vids.css({
+          width:this.dimvideo.w*1.3,
+          height:this.dimvideo.h,
+          marginLeft:(_container.w-this.dimvideo.w*1.3)/2
+        });
+
+        // create the slider with peppermint
+        $('.field-items', this.$vids).Peppermint();
+      };
+
+      Chapter.prototype.redimVideo = function(i,e){
+        // compute proportional video width ragarding the parent height
+        this.dimvideo.w = (this.dimvideo.h * parseInt($(e).attr("width")))/parseInt($(e).attr("height"));
+        // apply thees sizes
+        $(e)
+          .css({ width:this.dimvideo.w, height:this.dimvideo.h })
+          .attr({ width:this.dimvideo.w, height:this.dimvideo.h })
+            // add some paading to parent for slider display
+            .parent().css({
+                paddingLeft:this.dimvideo.w*0.15,
+                paddingright:this.dimvideo.w*0.15
+              });
       };
 
       Node.initialized = true;
-    }
+    };
 
     this.init();
   };//Chapter
@@ -566,6 +693,10 @@ jQuery(document).ready(function($) {
     };
   }
 
+  function translate3d(x, y, z){
+    // return
+  };
+
   /*
       _       _ __
      (_)___  (_) /_
@@ -577,7 +708,55 @@ jQuery(document).ready(function($) {
   init();
 });
 
+/*
+    ____  __    __  _____________   _______
+   / __ \/ /   / / / / ____/  _/ | / / ___/
+  / /_/ / /   / / / / / __ / //  |/ /\__ \
+ / ____/ /___/ /_/ / /_/ // // /|  /___/ /
+/_/   /_____/\____/\____/___/_/ |_//____/
+*/
+// https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
+// (function($) {
+//   $.fn.drags = function(opt) {
+
+//     opt = $.extend({handle:"",cursor:"move"}, opt);
 
+//     if(opt.handle === "") {
+//       var $el = this;
+//     } else {
+//       var $el = this.find(opt.handle);
+//     }
+
+//     return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
+//       if(opt.handle === "") {
+//         var $drag = $(this).addClass('draggable');
+//       } else {
+//         var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
+//       }
+//       var z_idx = $drag.css('z-index'),
+//           drg_h = $drag.outerHeight(),
+//           drg_w = $drag.outerWidth(),
+//           pos_y = $drag.offset().top + drg_h - e.pageY,
+//           pos_x = $drag.offset().left + drg_w - e.pageX;
+//       $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
+//         $('.draggable').offset({
+//             top:e.pageY + pos_y - drg_h,
+//             left:e.pageX + pos_x - drg_w
+//         }).on("mouseup", function() {
+//             $(this).removeClass('draggable').css('z-index', z_idx);
+//         });
+//       });
+//       e.preventDefault(); // disable selection
+//     }).on("mouseup", function() {
+//       if(opt.handle === "") {
+//         $(this).removeClass('draggable');
+//       } else {
+//         $(this).removeClass('active-handle').parent().removeClass('draggable');
+//       }
+//     });
+
+//   }
+// })(jQuery);
 
 /*
     ____  __________  __  ___________________   ___    _   ________  ______  ______________  _   __   __________  ___    __  _________

sites/all/themes/gui/jee/preprocess/html.pre.php

@@ -21,8 +21,6 @@ $heads['HandheldFriendly'] = array(
   ),
 );
 
-
-
 #  Mobile Viewport Fix
 # j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
 # device-width : Occupy full width of the screen in its current orientation
@@ -33,12 +31,10 @@ $heads['viewport'] = array(
   '#tag' => 'meta',
   '#attributes' => array(
     'name' => 'viewport',
-    'content' => 'width=device-width,initial-scale=1',
+    'content' => 'width=device-width,initial-scale=1,maximum-scale=1',
   ),
 );
 
-
-
 # Add these icons links to your sub theme
 # or Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
 
@@ -62,6 +58,22 @@ $heads['apple-touch-icon'] = array(
   ),
 );
 
+
+$heads['manifest'] = array(
+  '#tag' => 'link',
+  '#attributes' => array(
+    'href' => base_path() . path_to_theme() .'/manifest.webapp'
+  ),
+);
+
+$heads['manifest'] = array(
+  '#tag' => 'meta',
+  '#attributes' => array(
+    'name' => "application-name",
+    'content' => "Store Finder"
+  ),
+);
+
 foreach ($heads as $type=>$head)
 	drupal_add_html_head($head, $type);
 

sites/all/themes/gui/jee/templates/field--field-partie--chapter.tpl.php

@@ -0,0 +1,7 @@
+<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
+  <div class="field-items"<?php print $content_attributes; ?>>
+    <?php foreach ($items as $delta => $item): ?>
+      <?php print render($item); ?>
+    <?php endforeach; ?>
+  </div>
+</section>

sites/all/themes/gui/jee/templates/field.tpl.php

@@ -50,7 +50,7 @@ HTML comment.
 -->
 <section class="<?php print $classes; ?>"<?php print $attributes; ?>>
   <?php if (!$label_hidden): ?>
-    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
+    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?></div>
   <?php endif; ?>
   <?php if(count($items) > 1): ?>
   <div class="field-items"<?php print $content_attributes; ?>>

sites/all/themes/gui/jee/templates/html.tpl.php

@@ -58,11 +58,10 @@
 		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
 		     Remove this if you use the .htaccess -->
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="mobile-web-app-capable" content="yes">
-		<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
 
     <?php print $head; ?>
 
+
 		<title><?php print $head_title; ?></title>
 		<?php print $styles; ?>
 

sites/all/themes/gui/jee/templates/node--chapitre--teaser.tpl.php

@@ -0,0 +1,21 @@
+<section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
+  <?php if (!$page): ?>
+    <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
+  <?php endif; ?>
+  <div class="content">
+    <?php
+    // We hide the comments and links now so that we can render them later.
+    // dsm($content, "content");
+    hide($content['comments']);
+    hide($content['links']);
+    hide($content['field_comprendre']);
+    ?>
+    <div class="texts">
+    <?php
+      print render($content['field_comprendre']);
+      print render($content['links']);
+    ?>
+    </div>
+    <?php print render($content); ?>
+  </div>
+</section>

sites/all/themes/gui/jee/templates/node--chapitre.tpl.php

@@ -1,21 +1,13 @@
-<section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
+<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
+
   <?php if (!$page): ?>
-    <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
+    <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
   <?php endif; ?>
-  <div class="content">
-    <?php
+  <?php
     // We hide the comments and links now so that we can render them later.
-    // dsm($content, "content");
     hide($content['comments']);
-    hide($content['links']);
-    hide($content['field_comprendre']);
+    // hide($content['links']);
+    print render($content);
+    // print render($content['links']);
     ?>
-    <div class="texts">
-    <?php
-      print render($content['field_comprendre']);
-      print render($content['links']);
-    ?>
-    </div>
-    <?php print render($content); ?>
-  </div>
-</section>
+</div>

sites/all/themes/gui/jee/templates/video-embed-field-embed-code.tpl.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * @file
+ * Default theme implementation to display a video embed field.
+ *
+ * Variables available:
+ * - $url: The URL of the video to display embed code for
+ * - $style: The style name of the embed code to use
+ * - $style_settings: The style settings for the embed code
+ * - $handler: The name of the video handler
+ * - $embed_code: The embed code
+ * - $data: Additional video data
+ *
+ * @see template_preprocess_video_embed()
+ */
+?>
+<?php print $embed_code; ?>