parallaxslider-rails 1.0.0

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    MTNhOWViMzUwZTMxYjQwY2JjODczMWIwZmRlZGYzZjI4MzYwODk5YQ==
+  data.tar.gz: !binary |-
+    ZWQ3YTBlZjIyOTg4YmYyYjRkNDMxYzZlMTAwMDRkZDRjZGNkZjMwYg==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    ODc2NDRiYTBjNzY3ODIwZDg3NzYwYmIxNzk4ZWM1YjE4NzQ2OTExOGJhNzA2
+    NWZjNGViYjM2NTAwZWE1YmY5NzczMzRjYTgzOWFkYzAzZGZjZDc5NTc3ODdh
+    ZDViZDVhZjJiNWJhYWZiOTM5NTRiZWZkNzYwMWNiMzllZWNhODY=
+  data.tar.gz: !binary |-
+    Zjk1ZjI2Y2RmMjYyOGRiMDcxZjBkZDBhYWY3YzdmOTRmZTdhNGYxMGQ4MTQ2
+    YmY4MmYyMDFmM2NkZjQ3N2Y0Y2UxZTM4ZDFjMjcwODIyYjhkMDFhZWJlNDc3
+    MTFjNWE1MWMyNTYxYmYyZjhlYzY2N2JlZDhmYzg1Y2RjMDA2ZTM=

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in parallaxslider-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 producao02
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1 @@
+# parallaxslider-rails

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/app/assets/images/ImageAttribution.txt

@@ -0,0 +1,8 @@
+Background Pattern from http://subtlepatterns.com/
+
+Pattern DinPattern
+http://www.dinpattern.com/2011/03/21/waves/
+					
+Icons by: LazyCrazy via MediaLoot
+http://medialoot.com/item/free-designer-portfolio-icon-set/
+

data/app/assets/javascripts/jquery.cslider.js

@@ -0,0 +1,320 @@
+(function( $, undefined ) {
+		
+	/*
+	 * Slider object.
+	 */
+	$.Slider 				= function( options, element ) {
+	
+		this.$el	= $( element );
+		
+		this._init( options );
+		
+	};
+	
+	$.Slider.defaults 		= {
+		current		: 0, 	// index of current slide
+		bgincrement	: 50,	// increment the bg position (parallax effect) when sliding
+		autoplay	: false,// slideshow on / off
+		interval	: 4000  // time between transitions
+    };
+	
+	$.Slider.prototype 	= {
+		_init 				: function( options ) {
+			
+			this.options 		= $.extend( true, {}, $.Slider.defaults, options );
+			
+			this.$slides		= this.$el.children('div.da-slide');
+			this.slidesCount	= this.$slides.length;
+			
+			this.current		= this.options.current;
+			
+			if( this.current < 0 || this.current >= this.slidesCount ) {
+			
+				this.current	= 0;
+			
+			}
+			
+			this.$slides.eq( this.current ).addClass( 'da-slide-current' );
+			
+			var $navigation		= $( '<nav class="da-dots"/>' );
+			for( var i = 0; i < this.slidesCount; ++i ) {
+			
+				$navigation.append( '<span/>' );
+			
+			}
+			$navigation.appendTo( this.$el );
+			
+			this.$pages			= this.$el.find('nav.da-dots > span');
+			this.$navNext		= this.$el.find('span.da-arrows-next');
+			this.$navPrev		= this.$el.find('span.da-arrows-prev');
+			
+			this.isAnimating	= false;
+			
+			this.bgpositer		= 0;
+			
+			this.cssAnimations	= Modernizr.cssanimations;
+			this.cssTransitions	= Modernizr.csstransitions;
+			
+			if( !this.cssAnimations || !this.cssAnimations ) {
+				
+				this.$el.addClass( 'da-slider-fb' );
+			
+			}
+			
+			this._updatePage();
+			
+			// load the events
+			this._loadEvents();
+			
+			// slideshow
+			if( this.options.autoplay ) {
+			
+				this._startSlideshow();
+			
+			}
+			
+		},
+		_navigate			: function( page, dir ) {
+			
+			var $current	= this.$slides.eq( this.current ), $next, _self = this;
+			
+			if( this.current === page || this.isAnimating ) return false;
+			
+			this.isAnimating	= true;
+			
+			// check dir
+			var classTo, classFrom, d;
+			
+			if( !dir ) {
+			
+				( page > this.current ) ? d = 'next' : d = 'prev';
+			
+			}
+			else {
+			
+				d = dir;
+			
+			}
+				
+			if( this.cssAnimations && this.cssAnimations ) {
+				
+				if( d === 'next' ) {
+				
+					classTo		= 'da-slide-toleft';
+					classFrom	= 'da-slide-fromright';
+					++this.bgpositer;
+				
+				}
+				else {
+				
+					classTo		= 'da-slide-toright';
+					classFrom	= 'da-slide-fromleft';
+					--this.bgpositer;
+				
+				}
+				
+				this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );
+			
+			}
+			
+			this.current	= page;
+			
+			$next			= this.$slides.eq( this.current );
+			
+			if( this.cssAnimations && this.cssAnimations ) {
+			
+				var rmClasses	= 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
+				$current.removeClass( rmClasses );
+				$next.removeClass( rmClasses );
+				
+				$current.addClass( classTo );
+				$next.addClass( classFrom );
+				
+				$current.removeClass( 'da-slide-current' );
+				$next.addClass( 'da-slide-current' );
+				
+			}
+			
+			// fallback
+			if( !this.cssAnimations || !this.cssAnimations ) {
+				
+				$next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
+					left : '0%'
+				}, 1000, function() { 
+					_self.isAnimating = false; 
+				});
+				
+				$current.stop().animate( {
+					left : ( d === 'next' ) ? '-100%' : '100%'
+				}, 1000, function() { 
+					$current.removeClass( 'da-slide-current' ); 
+				});
+				
+			}
+			
+			this._updatePage();
+			
+		},
+		_updatePage			: function() {
+		
+			this.$pages.removeClass( 'da-dots-current' );
+			this.$pages.eq( this.current ).addClass( 'da-dots-current' );
+		
+		},
+		_startSlideshow		: function() {
+		
+			var _self	= this;
+			
+			this.slideshow	= setTimeout( function() {
+				
+				var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
+				_self._navigate( page, 'next' );
+				
+				if( _self.options.autoplay ) {
+				
+					_self._startSlideshow();
+				
+				}
+			
+			}, this.options.interval );
+		
+		},
+		page				: function( idx ) {
+			
+			if( idx >= this.slidesCount || idx < 0 ) {
+			
+				return false;
+			
+			}
+			
+			if( this.options.autoplay ) {
+			
+				clearTimeout( this.slideshow );
+				this.options.autoplay	= false;
+			
+			}
+			
+			this._navigate( idx );
+			
+		},
+		_loadEvents			: function() {
+			
+			var _self = this;
+			
+			this.$pages.on( 'click.cslider', function( event ) {
+				
+				_self.page( $(this).index() );
+				return false;
+				
+			});
+			
+			this.$navNext.on( 'click.cslider', function( event ) {
+				
+				if( _self.options.autoplay ) {
+				
+					clearTimeout( _self.slideshow );
+					_self.options.autoplay	= false;
+				
+				}
+				
+				var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
+				_self._navigate( page, 'next' );
+				return false;
+				
+			});
+			
+			this.$navPrev.on( 'click.cslider', function( event ) {
+				
+				if( _self.options.autoplay ) {
+				
+					clearTimeout( _self.slideshow );
+					_self.options.autoplay	= false;
+				
+				}
+				
+				var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
+				_self._navigate( page, 'prev' );
+				return false;
+				
+			});
+			
+			if( this.cssTransitions ) {
+			
+				if( !this.options.bgincrement ) {
+					
+					this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {
+						
+						if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {
+							
+							_self.isAnimating	= false;
+						
+						}	
+						
+					});
+					
+				}
+				else {
+				
+					this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {
+					
+						if( event.target.id === _self.$el.attr( 'id' ) )
+							_self.isAnimating	= false;
+						
+					});
+				
+				}
+			
+			}
+			
+		}
+	};
+	
+	var logError 			= function( message ) {
+		if ( this.console ) {
+			console.error( message );
+		}
+	};
+	
+	$.fn.cslider			= function( options ) {
+	
+		if ( typeof options === 'string' ) {
+			
+			var args = Array.prototype.slice.call( arguments, 1 );
+			
+			this.each(function() {
+			
+				var instance = $.data( this, 'cslider' );
+				
+				if ( !instance ) {
+					logError( "cannot call methods on cslider prior to initialization; " +
+					"attempted to call method '" + options + "'" );
+					return;
+				}
+				
+				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+					logError( "no such method '" + options + "' for cslider instance" );
+					return;
+				}
+				
+				instance[ options ].apply( instance, args );
+			
+			});
+		
+		} 
+		else {
+		
+			this.each(function() {
+			
+				var instance = $.data( this, 'cslider' );
+				if ( !instance ) {
+					$.data( this, 'cslider', new $.Slider( options, this ) );
+				}
+			});
+		
+		}
+		
+		return this;
+		
+	};
+	
+})( jQuery );

data/app/assets/javascripts/modernizr.custom.28468.js

@@ -0,0 +1,4 @@
+/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
+ * Build: http://www.modernizr.com/download/#-cssanimations-csstransitions-shiv-cssclasses-testprop-testallprops-domprefixes-load
+ */
+;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)if(j[a[d]]!==c)return b=="pfx"?a[d]:!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.substr(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.5.3",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.cssanimations=function(){return D("animationName")},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 x(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={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,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,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 o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?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)){a!="img"&&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={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?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),a!="img"&&(r||y[c]===2?(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(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&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&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},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<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,i){var j=b(a),l=j.autoCallback;j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2})))}function i(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var j,l,m=this.yepnope.loader;if(e(a))g(a,0,m,0);else if(w(a))for(j=0;j<a.length;j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);else Object(a)===a&&i(a,m)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

data/app/assets/stylesheets/demo.css

@@ -0,0 +1,190 @@
+@font-face {
+    font-family: 'BebasNeueRegular';
+    src: url('fonts/BebasNeue-webfont.eot');
+    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/BebasNeue-webfont.woff') format('woff'),
+         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
+         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+/* CSS reset */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
+	margin:0;
+	padding:0;
+}
+html,body {
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img { 
+	border:0;
+}
+address,caption,cite,code,dfn,th,var {
+	font-style:normal;
+	font-weight:normal;
+}
+ol,ul {
+	list-style:none;
+}
+caption,th {
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after {
+	content:'';
+}
+abbr,acronym { border:0;
+}
+section, header{
+	display: block;
+}
+/* General Demo Style */
+body{
+	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
+	background: #e0e3ec url(../images/bg.png) repeat top left;
+	font-weight: 400;
+	font-size: 15px;
+	color: #593741;
+	overflow-y: scroll;
+}
+a{
+	color: #333;
+	text-decoration: none;
+}
+.container{
+	width: 100%;
+	position: relative;
+	text-align: center;
+}
+.clr{
+	clear: both;
+}
+.container > header{
+	padding: 20px 30px 10px 30px;
+	margin: 0px 20px 10px 20px;
+	position: relative;
+	display: block;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+    text-align: center;
+}
+.container > header h1{
+	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
+	font-size: 35px;
+	line-height: 35px;
+	position: relative;
+	font-weight: 400;
+	color: #936975;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+    padding: 0px 0px 5px 0px;
+}
+.container > header h1 span{
+	color: #b19099;
+	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
+}
+.container > header h2{
+	font-size: 16px;
+	font-style: italic;
+	color: #593741;
+	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
+}
+/* Header Style */
+.codrops-top{
+	line-height: 24px;
+	font-size: 11px;
+	background: rgba(255, 255, 255, 0.6);
+	text-transform: uppercase;
+	z-index: 9999;
+	position: relative;
+	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
+}
+.codrops-top a{
+	padding: 0px 10px;
+	letter-spacing: 1px;
+	color: #333;
+	text-shadow: 0px 1px 1px #fff;
+	display: block;
+	float: left;
+}
+.codrops-top a:hover{
+	background: #fff;
+}
+.codrops-top span.right{
+	float: right;
+}
+.codrops-top span.right a{
+	float: left;
+	display: block;
+}
+
+p.codrops-demos{
+	text-align:center;
+	display: block;
+	padding: 14px;
+}
+p.codrops-demos a,
+p.codrops-demos a.current-demo,
+p.codrops-demos a.current-demo:hover{
+    display: inline-block;
+	border: 1px solid #b19099;
+	padding: 4px 10px 3px;
+	font-size: 13px;
+	line-height: 18px;
+	margin: 0px 3px;
+	font-weight: 800;
+	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+	-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
+	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+	color: #fff;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	background: #b19099;
+	background: -moz-linear-gradient(top, #b19099 0%, #936975 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b19099), color-stop(100%,#936975));
+	background: -webkit-linear-gradient(top, #b19099 0%,#936975 100%);
+	background: -o-linear-gradient(top, #b19099 0%,#936975 100%);
+	background: -ms-linear-gradient(top, #b19099 0%,#936975 100%);
+	background: linear-gradient(top, #b19099 0%,#936975 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b19099', endColorstr='#936975',GradientType=0 );
+}
+p.codrops-demos a:hover{
+	background: #b19099;
+}
+p.codrops-demos a:active{
+	-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
+	-moz-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
+	box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
+}
+p.codrops-demos a.current-demo,
+p.codrops-demos a.current-demo:hover{
+	color: #443132;
+	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
+}
+#testSlide3 {
+	display: inline-block;
+	border: 1px solid #b19099;
+	padding: 4px 10px 3px;
+	margin: 0px 3px;
+	color: #fff;
+	background: #111;
+}
+/* Media Queries */
+@media screen and (max-width: 767px) {
+	.container > header{
+		text-align: center;
+	}
+	p.codrops-demos {
+		position: relative;
+		top: auto;
+		left: auto;
+	}
+}