<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<link rel="stylesheet" href="introjs.css" />
</head>
<body>
<div class="container-narrow" ng-controller="MyController"
ng-intro-options="IntroOptions" ng-intro-method="CallMe"
ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
ng-intro-autostart="false">
<div class="masthead">
<ul id="step5" class="nav nav-pills pull-right">
<li><a href="http://code.mendhak.com/angular-intro.js/example/index.html">Download</a></li>
<li>aliqua</li>
</ul>
</div>
<div class="jumbotron">
<h1 id="step1">Lorem ipsum</h1>
<p id="step4" class="lead">consectetur adipisicing elit</p>
<button id="demo" class="btn btn-large btn-success" ng-click="CallMe();">Demo</button>
<button class="btn btn-large btn-success" ng-click="CallMe(3);">Start at step 3</button>
</div>
<div class="row-fluid marketing">
<br /><br />
<span id="step2" class="span6">
sed do eiusmod tempor
</span>
<br /><br />
<span id="step3" class="span6">
incididunt ut labore et dolore
</span>
</div>
<hr>
</div>
<script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="intro.min.js"></script>
<script src="angular-intro.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Styles go here */
(function(q,e){"object"===typeof exports?e(exports):"function"===typeof define&&define.amd?define(["exports"],e):e(q)})(this,function(q){function e(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||!0===a.hasOwnProperty("nodeName")||
"undefined"!=typeof a.nodeType)return a;var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,
a)}}function x(){if(0===this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);if(a=document.querySelector(".introjs-showElement"))a.className=
a.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");if((a=document.querySelectorAll(".introjs-fixParent"))&&0<a.length)for(var c=a.length-1;0<=c;c--)a[c].className=a[c].className.replace(/introjs-fixParent/g,"").replace(/^\s+|\s+$/g,"");window.removeEventListener?window.removeEventListener("keydown",this._onKeyDown,!0):document.detachEvent&&document.detachEvent("onkeydown",this._onKeyDown);this._currentStep=void 0}}function A(a,b,c){b.style.top=null;b.style.right=null;b.style.bottom=
null;b.style.left=null;if(this._introItems[this._currentStep]){var d="",d=this._introItems[this._currentStep],d="string"===typeof d.tooltipClass?d.tooltipClass:this._options.tooltipClass;b.className=("introjs-tooltip "+d).replace(/^\s+|\s+$/g,"");switch(this._introItems[this._currentStep].position){case "top":b.style.left="15px";b.style.top="-"+(p(b).height+10)+"px";c.className="introjs-arrow bottom";break;case "right":b.style.left=p(a).width+20+"px";c.className="introjs-arrow left";break;case "left":!0==
this._options.showStepNumbers&&(b.style.top="15px");b.style.right=p(a).width+20+"px";c.className="introjs-arrow right";break;default:b.style.bottom="-"+(p(b).height+10)+"px",c.className="introjs-arrow top"}}}function w(a){if(a&&this._introItems[this._currentStep]){var b=p(this._introItems[this._currentStep].element);a.setAttribute("style","width: "+(b.width+10)+"px; height:"+(b.height+10)+"px; top:"+(b.top-5)+"px;left: "+(b.left-5)+"px;")}}function z(a){var b;"undefined"!==typeof this._introChangeCallback&&
this._introChangeCallback.call(this,a.element);var c=this,d=document.querySelector(".introjs-helperLayer");p(a.element);if(null!=d){var f=d.querySelector(".introjs-helperNumberLayer"),B=d.querySelector(".introjs-tooltiptext"),j=d.querySelector(".introjs-arrow"),n=d.querySelector(".introjs-tooltip"),h=d.querySelector(".introjs-skipbutton"),m=d.querySelector(".introjs-prevbutton"),k=d.querySelector(".introjs-nextbutton");n.style.opacity=0;w.call(c,d);var l=document.querySelectorAll(".introjs-fixParent");
if(l&&0<l.length)for(b=l.length-1;0<=b;b--)l[b].className=l[b].className.replace(/introjs-fixParent/g,"").replace(/^\s+|\s+$/g,"");b=document.querySelector(".introjs-showElement");b.className=b.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");c._lastShowElementTimer&&clearTimeout(c._lastShowElementTimer);c._lastShowElementTimer=setTimeout(function(){null!=f&&(f.innerHTML=a.step);B.innerHTML=a.intro;A.call(c,a.element,n,j);d.querySelector(".introjs-bullets li > a.active").className=
"";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1},350)}else{var h=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),e=document.createElement("div");h.className="introjs-helperLayer";w.call(c,h);this._targetElement.appendChild(h);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";
!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;b<v;b++){var s=document.createElement("li"),r=document.createElement("a");r.onclick=function(){c.goToStep(this.getAttribute("data-stepnumber"))};0===b&&(r.className="active");r.href="javascript:void(0);";r.innerHTML=" ";r.setAttribute("data-stepnumber",this._introItems[b].step);s.appendChild(r);q.appendChild(s)}k.appendChild(q);e.className="introjs-tooltipbuttons";
!1===this._options.showButtons&&(e.style.display="none");g.className="introjs-tooltip";g.appendChild(m);g.appendChild(k);!0==this._options.showStepNumbers&&(b=document.createElement("span"),b.className="introjs-helperNumberLayer",b.innerHTML=a.step,h.appendChild(b));g.appendChild(l);h.appendChild(g);k=document.createElement("a");k.onclick=function(){c._introItems.length-1!=c._currentStep&&t.call(c)};k.href="javascript:void(0);";k.innerHTML=this._options.nextLabel;m=document.createElement("a");m.onclick=
function(){0!=c._currentStep&&x.call(c)};m.href="javascript:void(0);";m.innerHTML=this._options.prevLabel;h=document.createElement("a");h.className="introjs-button introjs-skipbutton";h.href="javascript:void(0);";h.innerHTML=this._options.skipLabel;h.onclick=function(){c._introItems.length-1==c._currentStep&&"function"===typeof c._introCompleteCallback&&c._introCompleteCallback.call(c);c._introItems.length-1!=c._currentStep&&"function"===typeof c._introExitCallback&&c._introExitCallback.call(c);u.call(c,
c._targetElement)};e.appendChild(h);1<this._introItems.length&&(e.appendChild(m),e.appendChild(k));g.appendChild(e);A.call(c,a.element,g,l)}0==this._currentStep&&1<this._introItems.length?(m.className="introjs-button introjs-prevbutton introjs-disabled",k.className="introjs-button introjs-nextbutton",h.innerHTML=this._options.skipLabel):this._introItems.length-1==this._currentStep||1==this._introItems.length?(h.innerHTML=this._options.doneLabel,m.className="introjs-button introjs-prevbutton",k.className=
"introjs-button introjs-nextbutton introjs-disabled"):(m.className="introjs-button introjs-prevbutton",k.className="introjs-button introjs-nextbutton",h.innerHTML=this._options.skipLabel);k.focus();a.element.className+=" introjs-showElement";b=y(a.element,"position");"absolute"!==b&&"relative"!==b&&(a.element.className+=" introjs-relativePosition");for(b=a.element.parentNode;null!=b&&"body"!==b.tagName.toLowerCase();){l=y(b,"z-index");g=parseFloat(y(b,"opacity"));if(/[0-9]+/.test(l)||1>g)b.className+=
" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(g=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=g.bottom-(g.bottom-g.top),g=g.bottom-b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,g+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,
a.element)}function y(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function C(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay";if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var f=p(a);f&&(c+="width: "+f.width+"px; height:"+
f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(a){var b={};b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;
return b}var v=function(a){if("object"===typeof a)return new e(a);if("string"===typeof a){if(a=document.querySelector(a))return new e(a);throw Error("There is no element with given selector.");}return new e(document.body)};v.version="0.7.1";v.fn=e.prototype={clone:function(){return new e(this)},setOption:function(a,b){this._options[a]=b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){a:{var a=this._targetElement,
b=[],c=this;if(this._options.steps)for(var d=[],f=0,d=this._options.steps.length;f<d;f++){var e=s(this._options.steps[f]);e.step=b.length+1;"string"===typeof e.element&&(e.element=document.querySelector(e.element));null!=e.element&&b.push(e)}else{d=a.querySelectorAll("*[data-intro]");if(1>d.length)break a;f=0;for(e=d.length;f<e;f++){var j=d[f],n=parseInt(j.getAttribute("data-step"),10);0<n&&(b[n-1]={element:j,intro:j.getAttribute("data-intro"),step:parseInt(j.getAttribute("data-step"),10),tooltipClass:j.getAttribute("data-tooltipClass"),
position:j.getAttribute("data-position")||this._options.tooltipPosition})}f=n=0;for(e=d.length;f<e;f++)if(j=d[f],null==j.getAttribute("data-step")){for(;"undefined"!=typeof b[n];)n++;b[n]={element:j,intro:j.getAttribute("data-intro"),step:n+1,tooltipClass:j.getAttribute("data-tooltipClass"),position:j.getAttribute("data-position")||this._options.tooltipPosition}}}f=[];for(d=0;d<b.length;d++)b[d]&&f.push(b[d]);b=f;b.sort(function(a,b){return a.step-b.step});c._introItems=b;C.call(c,a)&&(t.call(c),
a.querySelector(".introjs-skipbutton"),a.querySelector(".introjs-nextbutton"),c._onKeyDown=function(b){if(27===b.keyCode&&!0==c._options.exitOnEsc)u.call(c,a),void 0!=c._introExitCallback&&c._introExitCallback.call(c);else if(37===b.keyCode)x.call(c);else if(39===b.keyCode||13===b.keyCode)t.call(c),b.preventDefault?b.preventDefault():b.returnValue=!1},c._onResize=function(){w.call(c,document.querySelector(".introjs-helperLayer"))},window.addEventListener?(this._options.keyboardNavigation&&window.addEventListener("keydown",
c._onKeyDown,!0),window.addEventListener("resize",c._onResize,!0)):document.attachEvent&&(this._options.keyboardNavigation&&document.attachEvent("onkeydown",c._onKeyDown),document.attachEvent("onresize",c._onResize)))}return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&t.call(this);return this},nextStep:function(){t.call(this);return this},previousStep:function(){x.call(this);return this},exit:function(){u.call(this,this._targetElement)},refresh:function(){w.call(this,
document.querySelector(".introjs-helperLayer"));return this},onbeforechange:function(a){if("function"===typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=a;else throw Error("Provided callback for onchange was not a function.");return this},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange was not a function");
return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return q.introJs=v});
var ngIntroDirective = angular.module('angular-intro', []);
ngIntroDirective.directive('ngIntroOptions', ['$timeout', function ($timeout) {
return {
restrict: 'A',
scope: {
ngIntroMethod: "=",
ngIntroOptions: '=',
ngIntroOncomplete: '=',
ngIntroOnexit: '=',
ngIntroOnchange: '=',
ngIntroOnbeforechange: '=',
ngIntroOnafterchange: '=',
ngIntroAutostart: '@'
},
link: function(scope, element, attrs) {
scope.ngIntroMethod = function(step) {
var intro;
if(typeof(step) === 'string') {
intro = introJs(step);
} else {
intro = introJs();
}
intro.setOptions(scope.ngIntroOptions);
if(scope.ngIntroOncomplete) {
intro.oncomplete(scope.ngIntroOncomplete);
}
if(scope.ngIntroOnexit) {
intro.onexit(scope.ngIntroOnexit);
}
if(scope.ngIntroOnchange) {
intro.onchange(function(targetElement){
$timeout(function() { scope.ngIntroOnchange(targetElement)});
});
}
if(scope.ngIntroOnbeforechange) {
intro.onbeforechange(function(targetElement) {
$timeout(function() {
scope.ngIntroOnbeforechange(targetElement) ;
}, 0);
});
}
if(scope.ngIntroOnafterchange) {
intro.onafterchange(function(targetElement){
$timeout(function() { scope.ngIntroOnafterchange(targetElement); });
});
}
if(typeof(step) === 'number') {
intro.goToStep(step).start();
} else {
intro.start();
}
};
if(scope.ngIntroAutostart == 'true') {
$timeout(function() {
scope.ngIntroMethod();
});
}
}
};
}]);
var app = angular.module('myApp', ['angular-intro']);
app.controller('MyController', function ($scope) {
$scope.CompletedEvent = function () {
console.log("Completed Event called");
};
$scope.ExitEvent = function () {
console.log("Exit Event called");
};
$scope.ChangeEvent = function (targetElement) {
console.log("Change Event called");
console.log(targetElement);
};
$scope.BeforeChangeEvent = function (targetElement) {
console.log("Before Change Event called");
console.log(targetElement);
};
$scope.AfterChangeEvent = function (targetElement) {
console.log("After Change Event called");
console.log(targetElement);
};
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('#demo'),
intro: "This is the first tooltip."
},
{
element: document.querySelectorAll('#step2')[0],
intro: "<strong>You</strong> can also <em>include</em> HTML",
position: 'right'
},
{
element: '#step3',
intro: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
intro: "Another step.",
position: 'bottom'
},
{
element: '#step5',
intro: 'Get it, use it.'
}
],
showStepNumbers: false,
showBullets: false,
exitOnOverlayClick: true,
exitOnEsc:true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
});
.introjs-overlay {
position: absolute;
z-index: 999999;
background-color: #000;
opacity: 0;
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-fixParent {
z-index: auto !important;
}
.introjs-showElement {
z-index: 9999999 !important;
}
.introjs-relativePosition {
position: relative;
}
.introjs-helperLayer {
position: absolute;
z-index: 9999998;
background-color: #FFF;
background-color: rgba(255,255,255,.9);
border: 1px solid #777;
border: 1px solid rgba(0,0,0,.5);
border-radius: 4px;
box-shadow: 0 2px 15px rgba(0,0,0,.4);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-helperNumberLayer {
position: absolute;
top: -16px;
left: -16px;
z-index: 9999999999 !important;
padding: 2px;
font-family: Arial, verdana, tahoma;
font-size: 13px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
background: #ff3019; /* Old browsers */
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
width: 20px;
height:20px;
line-height: 20px;
border: 3px solid white;
border-radius: 50%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.introjs-arrow {
border: 5px solid white;
content:'';
position: absolute;
}
.introjs-arrow.top {
top: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.right {
right: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:white;
}
.introjs-arrow.bottom {
bottom: -10px;
border-top-color:white;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left {
left: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:white;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-tooltip {
position: absolute;
padding: 10px;
background-color: white;
min-width: 200px;
max-width: 300px;
border-radius: 3px;
box-shadow: 0 1px 10px rgba(0,0,0,.4);
-webkit-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
-ms-transition: opacity 0.1s ease-out;
-o-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out;
}
.introjs-tooltipbuttons {
text-align: right;
}
/*
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
Changed by Afshin Mehrabani
*/
.introjs-button {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.3em 0.8em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font: 11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
/* IE hacks */
zoom: 1;
*display: inline;
margin-top: 10px;
}
.introjs-button:hover {
border-color: #bcbcbc;
text-decoration: none;
box-shadow: 0px 1px 1px #e3e3e3;
}
.introjs-button:focus,
.introjs-button:active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
background-image: -moz-linear-gradient(#ececec, #f4f4f4);
background-image: -o-linear-gradient(#ececec, #f4f4f4);
background-image: linear-gradient(#ececec, #f4f4f4);
}
/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
padding: 0;
border: 0;
}
.introjs-skipbutton {
margin-right: 5px;
color: #7a7a7a;
}
.introjs-prevbutton {
-webkit-border-radius: 0.2em 0 0 0.2em;
-moz-border-radius: 0.2em 0 0 0.2em;
border-radius: 0.2em 0 0 0.2em;
border-right: none;
}
.introjs-nextbutton {
-webkit-border-radius: 0 0.2em 0.2em 0;
-moz-border-radius: 0 0.2em 0.2em 0;
border-radius: 0 0.2em 0.2em 0;
}
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
color: #9a9a9a;
border-color: #d4d4d4;
box-shadow: none;
cursor: default;
background-color: #f4f4f4;
background-image: none;
text-decoration: none;
}