├── README.md ├── README.txt ├── css ├── demo.css └── style.css ├── font ├── LICENSE.txt ├── README.txt ├── arrowicons.eot ├── arrowicons.svg ├── arrowicons.ttf └── arrowicons.woff ├── images └── noise2.png ├── index.html └── js ├── jquery.pagination.js ├── jquery.ui.touch-punch.min.js └── modernizr.custom.63321.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | SliderPagination 3 | ========= 4 | 5 | An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/?p=13079) 8 | 9 | [demo](http://tympanus.net/Development/SliderPagination) 10 | 11 | Licensed under the MIT License -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | Created by Codrops 2 | 3 | Please read about our license: http://tympanus.net/codrops/licensing/ -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900); 3 | 4 | html { height: 100%; } 5 | 6 | *, 7 | *:after, 8 | *:before { 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | box-sizing: border-box; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 17 | .clearfix:before, 18 | .clearfix:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | .clearfix:after { 24 | clear: both; 25 | } 26 | 27 | .clearfix { 28 | *zoom: 1; 29 | } 30 | 31 | body { 32 | font-family: 'Lato', Calibri, Arial, sans-serif; 33 | background: #d2eaff url(../images/noise2.png); 34 | font-weight: 300; 35 | font-size: 100%; 36 | color: #333; 37 | overflow: scroll; 38 | overflow-x: hidden; 39 | } 40 | 41 | a { 42 | color: #555; 43 | text-decoration: none; 44 | } 45 | 46 | .container { 47 | width: 100%; 48 | position: relative; 49 | } 50 | 51 | .main, 52 | .container > header { 53 | margin: 0 auto; 54 | position: relative; 55 | } 56 | 57 | .main { 58 | width: 40%; 59 | min-width: 320px; 60 | } 61 | 62 | .container > header { 63 | padding: 30px; 64 | width: 90%; 65 | max-width: 960px; 66 | } 67 | 68 | .container > header h1 { 69 | font-size: 2em; 70 | margin: 0; 71 | font-weight: 700; 72 | color: #fff; 73 | text-align: center; 74 | text-shadow: 0 1px 1px rgba(0,0,0,0.2); 75 | } 76 | 77 | .container > header h1 span { 78 | display: block; 79 | font-size: 60%; 80 | font-weight: 300; 81 | } 82 | 83 | /* Header Style */ 84 | .codrops-top { 85 | line-height: 2.2em; 86 | font-size: 0.7em; 87 | background: #fff; 88 | background: rgba(255, 255, 255, 0.5); 89 | text-transform: uppercase; 90 | z-index: 9999; 91 | position: relative; 92 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 93 | } 94 | 95 | .codrops-top a { 96 | padding: 0px 10px; 97 | letter-spacing: 1px; 98 | color: #333; 99 | display: inline-block; 100 | } 101 | 102 | .codrops-top a:hover { 103 | background: rgba(255,255,255,0.8); 104 | color: #000; 105 | } 106 | 107 | .codrops-top span.right { 108 | float: right; 109 | } 110 | 111 | .codrops-top span.right a { 112 | float: left; 113 | display: block; 114 | } 115 | 116 | .preview { 117 | background: rgba(161,207,246,0.2); 118 | border-radius: 10px; 119 | margin: 30px; 120 | height: 300px; 121 | text-align: center; 122 | box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 123 | } 124 | 125 | .preview span { 126 | color: #9cc5e8; 127 | font-size: 200px; 128 | line-height: 300px; 129 | text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.5); 130 | font-weight: 700; 131 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'arrowicons'; 3 | src: url("../font/arrowicons.eot"); 4 | src: url("../font/arrowicons.eot?#iefix") format('embedded-opentype'), url("../font/arrowicons.woff") format('woff'), url("../font/arrowicons.ttf") format('truetype'), url("../font/arrowicons.svg#arrowicons") format('svg'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | .sp-slider-wrapper { 10 | box-sizing: content-box; 11 | -webkit-box-sizing: content-box; 12 | -moz-box-sizing: content-box; 13 | padding: 15px 65px; 14 | position: relative; 15 | margin: 0 auto; 16 | width: 0px; 17 | -webkit-transition: width 150ms ease-out; 18 | transition: width 150ms ease-out; 19 | } 20 | 21 | .sp-slider-wrapper nav a { 22 | position: absolute; 23 | width: 50px; 24 | height: 50px; 25 | line-height: 50px; 26 | top: 0; 27 | cursor: pointer; 28 | text-indent: -9000px; 29 | } 30 | 31 | .sp-slider-wrapper nav a.sp-prev { 32 | left: 0px; 33 | } 34 | 35 | .sp-slider-wrapper nav a.sp-next { 36 | right: 0px; 37 | } 38 | 39 | .sp-slider-wrapper nav a:after { 40 | font-family: 'arrowicons'; 41 | font-style: normal; 42 | font-weight: normal; 43 | speak: none; 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | text-align: center; 50 | line-height: inherit; 51 | text-indent: 0px; 52 | font-size: 30px; 53 | color: #fff; 54 | text-shadow: 0 1px 1px rgba(0,0,0,0.2); 55 | } 56 | 57 | .sp-slider-wrapper nav a.sp-prev:after { 58 | content: '\e75d'; 59 | } 60 | 61 | .sp-slider-wrapper nav a.sp-next:after { 62 | content: '\e75e'; 63 | } 64 | 65 | .sp-slider { 66 | background: rgba(151,151,151,0.1); 67 | border: 1px solid rgba(108,108,108, 0.2); 68 | border-bottom: 1px solid rgba(108,108,108, 0.05); 69 | box-shadow: 0 1px 0 rgba(255,255,255,0.7); 70 | height: 20px; 71 | border-radius: 20px; 72 | position: relative; 73 | } 74 | 75 | .sp-slider .ui-slider-handle { 76 | outline: none; 77 | width: 40px; 78 | height: 40px; 79 | border-radius: 50%; 80 | border: none; 81 | top: -12px; 82 | margin-left: -20px; 83 | left: 0; 84 | cursor: pointer; 85 | position: absolute; 86 | background-color: #fff; 87 | background-image: -webkit-linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%); 88 | background-image: -moz-linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%); 89 | background-image: -o-linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%); 90 | background-image: linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%); 91 | box-shadow: 92 | 0 -1px 0 rgba(0,0,0,0.1), 93 | 0 1px 0 rgba(255,255,255,0.7), 94 | inset 1px -1px 1px rgba(0,0,0,0.1); 95 | } 96 | 97 | .sp-slider .ui-slider-handle.ui-state-active { 98 | box-shadow: 99 | 0 -1px 0 rgba(0,0,0,0.1), 100 | 0 1px 0 rgba(255,255,255,0.7), 101 | inset 1px -1px 2px rgba(0,0,0,0.15); 102 | } 103 | 104 | .sp-slider-open .ui-slider-handle { 105 | box-shadow: 106 | 0 1px 2px rgba(0,0,0,0.1), 107 | 0 6px 3px -3px rgba(0,0,0,0.1); 108 | } 109 | 110 | .sp-slider-open .ui-slider-handle.ui-state-active { 111 | box-shadow: 112 | 0 1px 2px rgba(0,0,0,0.1), 113 | 0 4px 3px -3px rgba(0,0,0,0.1); 114 | } 115 | 116 | .sp-slider .ui-slider-handle:after, 117 | .sp-slider .ui-slider-handle:before { 118 | content: ''; 119 | position: absolute; 120 | left: 10%; 121 | top: 10%; 122 | width: 80%; 123 | height: 80%; 124 | border-radius: 50%; 125 | opacity: 0.8; 126 | background-color: #fff; 127 | background-image: -webkit-linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%); 128 | background-image: -moz-linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%); 129 | background-image: -o-linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%); 130 | background-image: linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%); 131 | } 132 | 133 | .sp-slider .ui-slider-handle span { 134 | position: absolute; 135 | width: 100%; 136 | height: 100%; 137 | z-index: 10; 138 | text-align: center; 139 | background: transparent; 140 | color: #ccc; 141 | font-family: 'Lato', Arial, sans-serif; 142 | font-weight: 900; 143 | line-height: 40px; 144 | font-size: 14px; 145 | text-shadow: 0 1px 1px rgba(255,255,255,0.9); 146 | } 147 | 148 | .sp-slider-open .ui-slider-handle span { 149 | color: #aaa; 150 | } 151 | 152 | 153 | -------------------------------------------------------------------------------- /font/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Font license info 2 | 3 | 4 | ## Entypo 5 | 6 | Copyright (C) 2012 by Daniel Bruce 7 | 8 | Author: Daniel Buce 9 | License: SIL (http://scripts.sil.org/OFL) 10 | Homepage: http://www.entypo.com 11 | 12 | 13 | ## Font Awesome 14 | 15 | Copyright (C) 2012 by Dave Gandy 16 | 17 | Author: Dave Gandy 18 | License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/) 19 | Homepage: http://fortawesome.github.com/Font-Awesome/ 20 | 21 | 22 | ## Typicons 23 | 24 | (c) Stephen Hutchings 2012 25 | 26 | Author: Stephen Hutchings 27 | License: CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0/) 28 | Homepage: http://typicons.com/ 29 | 30 | 31 | -------------------------------------------------------------------------------- /font/README.txt: -------------------------------------------------------------------------------- 1 | This webfont is generated by http://fontello.com open source project. 2 | 3 | 4 | ================================================================================ 5 | Please, note, that you should obey original font licences, used to make this 6 | webfont pack. Details available in LICENSE.txt file. 7 | 8 | - Usually, it's enough to publish content of LICENSE.txt file somewhere on your 9 | site in "About" section. 10 | 11 | - If your project is open-source, usually, it will be ok to make LICENSE.txt 12 | file publically available in your repository. 13 | 14 | - Fonts, used in Fontello, don't require to make clickable links on your site. 15 | But any kind of additional authors crediting is welcome. 16 | ================================================================================ 17 | 18 | 19 | Comments on archive content 20 | --------------------------- 21 | 22 | - /font/* - fonts in different formats 23 | 24 | - /css/* - different kinds of css, for all situations. Should be ok with 25 | twitter bootstrap. Also, you can skip style and assign icon classes 26 | directly to text elements, if you don't mind about IE7. 27 | 28 | - demo.html - demo file, to show your webfont content 29 | 30 | - LICENSE.txt - license info about source fonts, used to build your one. 31 | 32 | - config.json - keeps your settings. You can import it back to fontello anytime, 33 | to continue your work 34 | 35 | 36 | Why so many CSS files ? 37 | ----------------------- 38 | 39 | Because we like to fit all your needs :) 40 | 41 | - basic file, .css - is usually enougth, in contains @font-face 42 | and character codes definition 43 | 44 | - *-ie7.css - if you need IE7 support, but still don't wish to put char codes 45 | directly into html 46 | 47 | - *-codes.css and *-ie7-codes.css - if you like to use your own @font-face 48 | rules, but still wish to benefit of css generation. That can be very 49 | convenient for automated assets build systems. When you need to update font - 50 | no needs to manually edit files, just override old version with archive 51 | content. See fontello source codes for example. 52 | 53 | - *-embedded.css - basic css file, but with embedded WOFF font, to avoid 54 | CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. 55 | We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` 56 | server headers. But if you ok with dirty hack - this file is for you. Note, 57 | that data url moved to separate @font-face to avoid problems with 2 | 3 | 4 | 5 | Created by FontForge 20100429 at Sat Dec 15 10:58:20 2012 6 | By root 7 | Copyright (C) 2012 by original authors @ fontello.com 8 | 9 | 10 | 11 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /font/arrowicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SliderPagination/ba698682091d8b0257b573ca786417de81c50e60/font/arrowicons.ttf -------------------------------------------------------------------------------- /font/arrowicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SliderPagination/ba698682091d8b0257b573ca786417de81c50e60/font/arrowicons.woff -------------------------------------------------------------------------------- /images/noise2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SliderPagination/ba698682091d8b0257b573ca786417de81c50e60/images/noise2.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider Pagination Concept - with jQuery UI Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | « Previous Demo: Sticky Captions 23 | 24 | 25 | 26 | Back to the Codrops Article 27 | 28 | 29 |
30 |
31 |

Slider Pagination Concept with jQuery UI Slider

32 |
33 |
34 |
35 | 1 36 |
37 |
38 | 42 |
43 |
44 |
45 | 46 | 47 | 48 | 49 | 63 | 64 | -------------------------------------------------------------------------------- /js/jquery.pagination.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Slider Pagination Concept 3 | * jquery.pagination.js v1.0.0 4 | * http://www.codrops.com 5 | * 6 | * Licensed under the MIT license. 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * 9 | * Copyright 2012, Codrops 10 | * http://www.codrops.com 11 | */ 12 | ;( function( $, window, undefined ) { 13 | 14 | 'use strict'; 15 | 16 | $.Slider = function( settings, element ) { 17 | this.$el = element; 18 | this.value = settings.value; 19 | this.total = settings.total; 20 | this.width = settings.width; 21 | this._create(); 22 | }; 23 | $.Slider.prototype = { 24 | _create : function() { 25 | 26 | var self = this; 27 | this.slider = this.$el.slider( { 28 | value : this.value, 29 | min : 1, 30 | max : this.total, 31 | step : 1 32 | } ); 33 | this.$value = $( '' + this.value + '' ); 34 | this.getHandle().append( this.$value ); 35 | 36 | }, 37 | setValue : function( value ) { 38 | this.value = value; 39 | this.$value.text( value ); 40 | this.slider.slider( 'value', value ); 41 | }, 42 | getValue : function() { 43 | return this.value; 44 | }, 45 | getHandle : function() { 46 | return this.$el.find( 'a.ui-slider-handle' ); 47 | }, 48 | getSlider : function() { 49 | return this.slider; 50 | }, 51 | getSliderEl : function() { 52 | return this.$el; 53 | }, 54 | next : function( callback ) { 55 | if( this.value < this.total ) { 56 | this.setValue( ++this.value ); 57 | if( callback ) { 58 | callback.call( this, this.value ); 59 | } 60 | } 61 | }, 62 | previous : function( callback ) { 63 | if( this.value > 1 ) { 64 | this.setValue( --this.value ); 65 | if( callback ) { 66 | callback.call( this, this.value ); 67 | } 68 | } 69 | } 70 | }; 71 | 72 | $.Pagination = function( options, element ) { 73 | this.$el = $( element ); 74 | this._init( options ); 75 | }; 76 | 77 | // the options 78 | $.Pagination.defaults = { 79 | value : 1, 80 | total : 5, 81 | width : 200, 82 | onChange : function( value ) { return false; }, 83 | onSlide : function( value ) { return false; } 84 | }; 85 | 86 | $.Pagination.prototype = { 87 | 88 | _init : function( options ) { 89 | 90 | // options 91 | this.options = $.extend( true, {}, $.Pagination.defaults, options ); 92 | var transEndEventNames = { 93 | 'WebkitTransition' : 'webkitTransitionEnd', 94 | 'MozTransition' : 'transitionend', 95 | 'OTransition' : 'oTransitionEnd', 96 | 'msTransition' : 'MSTransitionEnd', 97 | 'transition' : 'transitionend' 98 | }; 99 | this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; 100 | $.fn.applyStyle = Modernizr.csstransitions ? $.fn.css : $.fn.animate; 101 | this._layout(); 102 | this._initEvents(); 103 | 104 | }, 105 | _layout : function() { 106 | 107 | // next and previous 108 | this.$navNext = this.$el.find( 'nav > a.sp-next' ); 109 | this.$navPrev = this.$el.find( 'nav > a.sp-prev' ); 110 | // slider 111 | var $slider = $( '
' ).appendTo( this.$el ); 112 | this.slider = new $.Slider( { value : this.options.value, total : this.options.total, width : this.options.width }, $slider ); 113 | // control if the slider is opened/closed 114 | this.isSliderOpened = false; 115 | 116 | }, 117 | _initEvents : function() { 118 | 119 | var self = this; 120 | 121 | this.slider.getHandle().on( 'click', function() { 122 | 123 | if( self.isSliderOpened ) { 124 | return false; 125 | } 126 | self.isSliderOpened = true; 127 | self.slider.getSliderEl().addClass( 'sp-slider-open' ); 128 | // expand slider wrapper 129 | self.$el.stop().applyStyle( { width : self.options.width }, $.extend( true, [], { duration : '150ms' } ) ); 130 | // hide navigation 131 | self.toggleNavigation( false ); 132 | return false; 133 | 134 | } ); 135 | 136 | this.slider.getSlider().on( { 137 | 'slidestop' : function( event, ui ) { 138 | 139 | if( !self.isSliderOpened ) { 140 | return false; 141 | } 142 | 143 | var animcomplete = function() { 144 | 145 | self.isSliderOpened = false; 146 | self.slider.getSliderEl().removeClass( 'sp-slider-open' ); 147 | // show navigation 148 | self.toggleNavigation( true ); 149 | 150 | }; 151 | self.$el.stop().applyStyle( { width : 0 }, $.extend( true, [], { duration : '150ms', complete : animcomplete } ) ).on( self.transEndEventName, function() { 152 | 153 | $( this ).off( self.transEndEventName ); 154 | animcomplete.call(); 155 | 156 | } ); 157 | 158 | self.options.onChange( ui.value ); 159 | 160 | }, 161 | 'slide' : function( event, ui ) { 162 | 163 | if( !self.isSliderOpened ) { 164 | return false; 165 | } 166 | self.slider.setValue( ui.value ); 167 | self.options.onSlide( ui.value ); 168 | 169 | } 170 | } ); 171 | 172 | this.$navNext.on( 'click', function() { 173 | 174 | self.slider.next( function( value ) { 175 | self.options.onChange( value ); 176 | } ); 177 | return false; 178 | 179 | } ); 180 | this.$navPrev.on( 'click', function() { 181 | 182 | self.slider.previous( function( value ) { 183 | self.options.onChange( value ); 184 | } ); 185 | return false; 186 | 187 | } ); 188 | 189 | }, 190 | toggleNavigation : function( toggle ) { 191 | 192 | $.fn.render = toggle ? $.fn.show : $.fn.hide; 193 | this.$navNext.render(); 194 | this.$navPrev.render(); 195 | 196 | } 197 | 198 | } 199 | 200 | $.fn.pagination = function( options ) { 201 | var instance = $.data( this, 'pagination' ); 202 | if ( typeof options === 'string' ) { 203 | var args = Array.prototype.slice.call( arguments, 1 ); 204 | this.each(function() { 205 | instance[ options ].apply( instance, args ); 206 | }); 207 | } 208 | else { 209 | this.each(function() { 210 | instance ? instance._init() : instance = $.data( this, 'pagination', new $.Pagination( options, this ) ); 211 | }); 212 | } 213 | return instance; 214 | }; 215 | 216 | } )( jQuery, window ); -------------------------------------------------------------------------------- /js/jquery.ui.touch-punch.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Touch Punch 0.2.2 3 | * 4 | * Copyright 2011, Dave Furfero 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * 7 | * Depends: 8 | * jquery.ui.widget.js 9 | * jquery.ui.mouse.js 10 | */ 11 | (function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery); -------------------------------------------------------------------------------- /js/modernizr.custom.63321.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f