1
0
mirror of https://gitee.com/coder-xiaomo/flashsale synced 2025-09-14 07:51:38 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

添加Metronic(作为LFS)

This commit is contained in:
2022-03-01 21:24:58 +08:00
parent 080ca33954
commit 465c454101
3280 changed files with 561969 additions and 0 deletions

View File

@@ -0,0 +1,591 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="active" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>
<article class="">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">BASIC CAPTION<br>ANIMATIONS
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">FADE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM LEFT (sfl)
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="350"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SKEW FROM LEFT (skewfromleft)
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="50"
data-y="200"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM TOP (sft)
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="50"
data-y="400"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM TOP (lft)
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-hoffset="-50"
data-y="200"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM RIGHT (sfr)
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="250"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SKEW FROM RIGHT (skewfromright)
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="right"
data-hoffset="-50"
data-y="300"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM BOTTOM (sfb)
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-hoffset="-50"
data-y="350"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM BOTTOM (lfb)
</div>
<!-- LAYER NR. 10 -->
<div class="tp-caption medium_bg_asbestos randomrotate"
data-x="right"
data-hoffset="-50"
data-y="400"
data-speed="800"
data-start="6800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">RANDOM ROTATE (randomrotate)
</div>
<!-- LAYER NR. 11 -->
<div class="tp-caption medium_bg_asbestos lfr"
data-x="right"
data-hoffset="-50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM RIGHT (lfr)
</div>
<!-- LAYER NR. 12 -->
<div class="tp-caption medium_bg_asbestos lfl"
data-x="50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM LEFT (lfl)
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER 0 -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">SOME FANCY EASING
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power1.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power1.easeOut
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Back.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Back.easeOut
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="350"
data-speed="800"
data-start="1900"
data-easing="Elastic.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Elastic.easeOut
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="200"
data-speed="800"
data-start="2600"
data-easing="Power3.easeInOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power3.easeInOut
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="400"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power4.easeOut
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="200"
data-speed="800"
data-start="4000"
data-easing="Power2.easeInOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power2.easeInOut
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="250"
data-speed="800"
data-start="4700"
data-easing="Circ.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Circ.easeOut
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="300"
data-speed="800"
data-start="5400"
data-easing="Cube.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Cube.easeOut
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="350"
data-speed="800"
data-start="6100"
data-easing="Bounce.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Bounce.easeOut
</div>
<!-- LAYER NR. 10 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="400"
data-speed="800"
data-start="6800"
data-easing="Linear.easeNone"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Linear.easeNone
</div>
<!-- LAYER NR. 11 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Expo.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Expo.easeOut
</div>
<!-- LAYER NR. 12 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Expo.easeIn"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Expo.easeIn
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="right"
data-hoffset="-60"
data-y="bottom"
data-voffset="-120"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">GO AND GIVE A TRY
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">CREATE AWESOME ANIMATIONS
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:15000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullWidth:"off",
fullScreen:"on",
fullScreenOffsetContainer: ""
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
<!-- Content End -->
</article> <!-- END OF SPECTACULUS -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>What to do for FullScreen?</h2>
<p>Make sure that your slider Wrapping Container allows you to go fullwidth and fullheight, and there is no limitation in width / maxwidth.In case your container is Boxed, and you want to force the Slider to go Fullscreen, than simple use the forceFullWidth:"on" parameter !</p>
<p>If you wish to have an Offset top and bottom, since you have some header or Footer, or both, please take a look on the example 03B here: <a href="03B.Sample-FullScreen-Offsets.html">03B.Sample-FullScreen-Offsets</a></p>
<div style="width:100%; height:40px"></div>
<h3> Initialise the Plugin with fullScreen parameters:</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:15000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullWidth:"off",
fullScreen:"on",
fullScreenOffsetContainer: ""
});
}); //ready
&lt;/script&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,606 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="active" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>
<!-- HEADER -->
<header id="header">
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">BASIC CAPTION<br>ANIMATIONS
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">FADE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM LEFT (sfl)
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="350"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SKEW FROM LEFT (skewfromleft)
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="50"
data-y="200"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM TOP (sft)
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="50"
data-y="400"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM TOP (lft)
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-hoffset="-50"
data-y="200"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM RIGHT (sfr)
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="250"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SKEW FROM RIGHT (skewfromright)
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="right"
data-hoffset="-50"
data-y="300"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM BOTTOM (sfb)
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-hoffset="-50"
data-y="350"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM BOTTOM (lfb)
</div>
<!-- LAYER NR. 10 -->
<div class="tp-caption medium_bg_asbestos randomrotate"
data-x="right"
data-hoffset="-50"
data-y="400"
data-speed="800"
data-start="6800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">RANDOM ROTATE (randomrotate)
</div>
<!-- LAYER NR. 11 -->
<div class="tp-caption medium_bg_asbestos lfr"
data-x="right"
data-hoffset="-50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM RIGHT (lfr)
</div>
<!-- LAYER NR. 12 -->
<div class="tp-caption medium_bg_asbestos lfl"
data-x="50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM LEFT (lfl)
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER 0 -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">SOME FANCY EASING
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power1.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power1.easeOut
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Back.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Back.easeOut
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="350"
data-speed="800"
data-start="1900"
data-easing="Elastic.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Elastic.easeOut
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="200"
data-speed="800"
data-start="2600"
data-easing="Power3.easeInOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power3.easeInOut
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="400"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power4.easeOut
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="200"
data-speed="800"
data-start="4000"
data-easing="Power2.easeInOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power2.easeInOut
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="250"
data-speed="800"
data-start="4700"
data-easing="Circ.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Circ.easeOut
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="300"
data-speed="800"
data-start="5400"
data-easing="Cube.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Cube.easeOut
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="350"
data-speed="800"
data-start="6100"
data-easing="Bounce.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Bounce.easeOut
</div>
<!-- LAYER NR. 10 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="400"
data-speed="800"
data-start="6800"
data-easing="Linear.easeNone"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Linear.easeNone
</div>
<!-- LAYER NR. 11 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Expo.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Expo.easeOut
</div>
<!-- LAYER NR. 12 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Expo.easeIn"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Expo.easeIn
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="right"
data-hoffset="-60"
data-y="bottom"
data-voffset="-120"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">GO AND GIVE A TRY
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">CREATE AWESOME ANIMATIONS
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:15000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullWidth:"off",
fullScreen:"on",
fullScreenOffsetContainer: "#header, #footer"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
<!-- Content End -->
</article> <!-- END OF SPECTACULUS -->
<!-- HEADER -->
<footer id="footer" style="width:100%;background:#f39c12">
<section class="container" style="padding-top:20px;padding-bottom:10px;">
<h2> THIS IS SOME FOOTER CONTAINER, TO SHOW HOW THE OFFSET CONTAINERS WORK.</h2>
</section>
</footer> <!-- END OF HEADER -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>What to do for FullScreen?</h2>
<p>Make sure that your slider Wrapping Container allows you to go fullwidth and fullheight, and there is no limitation in width / maxwidth.In case your container is Boxed, and you want to force the Slider to go Fullscreen, than simple use the forceFullWidth:"on" parameter !</p>
<p>If you dont need the Offset (header and footer) take a look on the simple Fullscreen example here: <a href="03.Sample-FullScreen.html">03.Sample-FullScreen</a></p>
<div style="width:100%; height:40px"></div>
<h3> Initialise the Plugin with fullScreen parameters:</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:15000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullWidth:"off",
fullScreen:"on",
fullScreenOffsetContainer: ""
});
}); //ready
&lt;/script&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,524 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="active" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Top
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="center"
data-y="0"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Top
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="right"
data-y="0"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Top
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="0"
data-y="center"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Center
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="center"
data-y="center"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Center
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-hoffset="0"
data-y="center"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Center
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="0"
data-hoffset="0"
data-y="bottom"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Bottom
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="center"
data-hoffset="0"
data-y="bottom"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Bottom
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-hoffset="0"
data-y="bottom"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Bottom
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER 0 -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="100"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Top (x+50, y+100)
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="center"
data-y="40"
data-hoffset="-50"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Top (x-50, y+40)
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="right"
data-y="20"
data-hoffset="-90"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Top (x-90, y+20)
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="30"
data-y="center"
data-voffset="-20"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Center (x+30, y-20)
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="center"
data-y="center"
data-hoffset="-30"
data-voffset="20"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Center (x-30,y+20)
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-y="center"
data-hoffset="-50"
data-voffset="-40"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Center (x-50, y-40)
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="15"
data-y="bottom"
data-voffset="-20"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Bottom (x+15,y-20)
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="center"
data-hoffset="0"
data-voffset="-10"
data-y="bottom"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Bottom (y-10)
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-y="bottom"
data-hoffset="-30"
data-voffset="-30"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Bottom (x-30, y-30)
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="right"
data-hoffset="-60"
data-y="bottom"
data-voffset="-120"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">GO AND GIVE A TRY
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">CREATE AWESOME ANIMATIONS
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>How to Align Captions ?</h2>
<p>Each Caption is positioned via Absolute Position relative to the left/top corner of the Grid. The Grid is the Caption holder. It can but must not be the same size as the Slider itself. Since fullwidth and fullscreen slider can have a higher width or height dimension then the caption Grid itself. Still you can help yourself and position the captions on the center or bottom / right positions in the Grid. For this take a look on the following Settings in the Captions</p>
<p>In case you wish to force the Aligns go to the real corners of the Slide and break the Grid size, you can do this via some special options. See example: <a href="04B.Sample-AlignForce.html">04B.Sample-AlignForce.html</a></p>
<div style="width:100%;height:20px"></div>
<h3>Caption at Center Center</h3>
<pre>
&lt;div class="tp-caption medium_bg_asbestos lft"
<strong>data-x="center"
data-y="center"
data-hoffset="0"
data-voffset="0"</strong>
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6"&gt;Center Center
&lt;/div&gt;
</pre>
<div style="width:100%;height:20px"></div>
<p>To move vertical or horizontal the caption from that aligned position, you can use the hoffset and voffset settings</p>
<div style="width:100%;height:20px"></div>
<h3>Center Center with -30px in the horizontal and +20px in the vertical direction</h3>
<pre>
&lt;div class="tp-caption medium_bg_asbestos lft"
<strong>data-x="center"
data-y="center"
data-hoffset="-30"
data-voffset="20"</strong>
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6"&gt;Center Center
&lt;/div&gt;
</pre>
<div style="width:100%;height:20px"></div>
<p>In case you set the data-x and data-y with a value (not like center, right or vertical top, center, bottom) the captions will be aligned to the left top corner.</p>
<div style="width:100%;height:20px"></div>
<h3>Left Top (default) Align, and simple positions</h3>
<pre>
&lt;div class="tp-caption medium_bg_asbestos lft"
<strong>data-x="250"
data-y="180"</strong>
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6"&gt;Center Center
&lt;/div&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,487 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="active" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<article class="">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Top
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="center"
data-y="0"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Top
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="right"
data-y="0"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Top
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="0"
data-y="center"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Center
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="center"
data-y="center"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Center
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-hoffset="0"
data-y="center"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Center
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="0"
data-hoffset="0"
data-y="bottom"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Bottom
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="center"
data-hoffset="0"
data-y="bottom"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Bottom
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-hoffset="0"
data-y="bottom"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Bottom
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER 0 -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="100"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Top (x+50, y+100)
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="center"
data-y="40"
data-hoffset="-50"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Top (x-50, y+40)
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="right"
data-y="20"
data-hoffset="-90"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Top (x-90, y+20)
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="30"
data-y="center"
data-voffset="-20"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Center (x+30, y-20)
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="center"
data-y="center"
data-hoffset="-30"
data-voffset="20"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Center (x-30,y+20)
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-y="center"
data-hoffset="-50"
data-voffset="-40"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Center (x-50, y-40)
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="15"
data-y="bottom"
data-voffset="-20"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Left Bottom (x+15,y-20)
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="center"
data-hoffset="0"
data-voffset="-10"
data-y="bottom"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Center Bottom (y-10)
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-y="bottom"
data-hoffset="-30"
data-voffset="-30"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Right Bottom (x-30, y-30)
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="right"
data-hoffset="-60"
data-y="bottom"
data-voffset="-120"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">GO AND GIVE A TRY
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">CREATE AWESOME ANIMATIONS
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullScreen:"on",
fullScreenAlignForce:"on"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>How to Force the Captions Aligns in FullScreen?</h2>
<p>In Default mode the captions are aligned within the Grid. The Gird is always vertical and horizontal aligned when the slider container is bigger then the Grid startwidth and startheight size. Since some Fullscreen Demo needs the very far corners, we added this forceAlign option. For this simple initialise the slider with the following options:</p>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullScreen:"on",
<strong>fullScreenAlignForce:"on"</strong>
});
});
&lt;/script&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,751 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="active" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="20"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">VIMEO
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="70"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTOPLAY - FALSE
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="120"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO NEXT SLIDE - FALSE
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="170"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO PLAY ONLY ONCE - FALSE
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption sft customout"
data-x="399"
data-y="385"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="1500"
data-easing="Back.easeOut"
data-endspeed="500"
data-captionhidden="on"
style="z-index: 7"><img src="images/videoshadow.png" alt="">
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption customin customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
data-autoplay="false"
data-autoplayonlyfirsttime="false"
style="z-index: 8"><iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360' style='width:640px;height:360px;'></iframe>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="20"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">YOUTUBE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="70"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTOPLAY - TRUE
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="120"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO NEXT SLIDE - TRUE
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="170"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO PLAY ONLY ONCE - TRUE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption sfb customout"
data-x="399"
data-y="385"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="1500"
data-easing="Back.easeOut"
data-endspeed="500"
data-captionhidden="on"
style="z-index: 7"><img src="images/videoshadow.png" alt="">
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption sft customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
data-autoplay="true"
data-autoplayonlyfirsttime="true"
data-nextslideatend="true"
style="z-index: 8"><iframe src='https://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360' style='width:640px;height:360px;'></iframe>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="20"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">YOUTUBE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="70"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTOPLAY - FALSE
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="120"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO NEXT SLIDE - TRUE
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="170"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">THUMBNAIL IMAGE - TRUE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption sfb customout"
data-x="399"
data-y="385"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="1500"
data-easing="Back.easeOut"
data-endspeed="500"
data-captionhidden="on"
style="z-index: 7"><img src="images/videoshadow.png" alt="">
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption sft customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
data-autoplay="false"
data-nextslideatend="true"
data-thumbimage="images/bg3.jpg"
style="z-index: 8"><iframe src='https://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360' style='width:640px;height:360px;'></iframe>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="20"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">HTML5
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="70"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTOPLAY - TRUE
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="120"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO NEXT SLIDE - FALSE
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="170"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">AUTO PLAY ONLY ONCE - FALSE
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption sfb customout"
data-x="399"
data-y="385"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="1500"
data-easing="Back.easeOut"
data-endspeed="500"
data-captionhidden="on"
style="z-index: 7"><img src="images/videoshadow.png" alt="">
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption customin customout"
data-x="center" data-hoffset="0"
data-y="50" data-voffset="0"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="false"
style="z-index: 8;">
<video class="" preload="none" width="640px" height="360px"
poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="20"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">HTML5
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="70"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">CONTROLS - NONE
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="120"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">LOOP - TRUE
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red skewfromleft customout"
data-x="20"
data-y="120"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 7">FULLSCREEN VIDEO
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption customin customout fullscreenvideo"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="0"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="false"
style="z-index: 1">
<video class="" preload="none" loop width="100%" height="100%"
poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
videoJsPath:"rs-plugin/videojs/"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>How to Embed Videos in the Slider ?</h2>
<p>You can embed Vimeo, YouTube and HTML5 Videos as Video Captions. Within a video you can set autoplay, autoplay only first time, loop (html5), nocontrol(html5), thumbnails for videos, fullscreen or predefined size.</p>
<div style="width:100%;height:20px"></div>
<h3>Important options in Plugin Initialisation:</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
<strong>videoJsPath:"rs-plugin/videojs/"</strong>
});
});
&lt;/script&gt;
</pre>
<div style="width:100%;height:20px"></div>
<h3>YouTube Example - AutoPlay and Next Slide at End of the Video turned on</h3>
<pre>
&lt;div class="tp-caption sft customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
<strong>data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"</strong>
&gt;
<strong>&lt;iframe src='http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360'
style='width:640px;height:360px;'&gt;
&lt;/iframe&gt;
</strong>
&lt;/div&gt;
</pre>
<div style="width:100%;height:20px"></div>
<h3>Vimeo Example - AutoPlay on First Time and Next Slide at End of the Video turned on.</h3>
<pre>
&lt;div class="tp-caption sft customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
<strong>data-autoplay="true"
data-autoplayonlyfirsttime="true"
data-nextslideatend="true"</strong>
&gt;
<strong>&lt;iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360'
style='width:640px;height:360px;'&gt;
&lt;/iframe&gt;
</strong>
&lt;/div&gt;
</pre>
<div style="width:100%;height:20px"></div>
<h3>HTML5 Example - Autoplay On, Loop but with Controls, and in Fullscreen.</h3>
<pre>
&lt;div class="tp-caption sft customout <strong>fullscreenvideo</strong>"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
<strong>data-autoplay="true"
data-autoplayonlyfirsttime="true"
data-nextslideatend="true"</strong>
&gt;
<strong>&lt;video class="video-js vjs-default-skin" preload="none" loop controls width="100%" height="100%"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}"&gt;
&lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /&gt;
&lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /&gt;
&lt;source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /&gt;
&lt;track kind="captions" src="demo.captions.vtt" srclang="en" label="English" /&gt;
&lt;/video&gt;
</strong>
&lt;/div&gt;
</pre>
<div style="width:100%;height:20px"></div>
<h3>YouTube Example - With Thumbnail Image over Video</h3>
<pre>
&lt;div class="tp-caption sft customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
<strong>data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-thumbimage="images/bg3.jpg"</strong>
&gt;
<strong>&lt;iframe src='http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360'
style='width:640px;height:360px;'&gt;
&lt;/iframe&gt;
</strong>
&lt;/div&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,576 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="active" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<div style="float:left;width:50%;">
<div class="tp-banner-container">
<div id="slider1" class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
</div>
<div style="float:left;width:50%;">
<div class="tp-banner-container">
<div id="slider2" class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg2.jpg">
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg1.jpg">
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg4.jpg">
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700"data-thumb="images/bg3.jpg" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div style="float:left;width:50%;">
<div class="tp-banner-container">
<div id="slider3" class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
</div>
<div style="float:left;width:50%;">
<div id ="slider4container" class="tp-banner-container">
<div id="slider4" class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg4.jpg">
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg3.jpg">
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg1.jpg">
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700"data-thumb="images/bg2.jpg" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#slider1').revolution(
{
delay:4000,
startwidth:1170,
startheight:500,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:5,
navigationType:"bullet",
navigationArrows:"solo",
navigationStyle:"round",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"bottom",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:20,
soloArrowRightHalign:"right",
soloArrowRightValign:"bottom",
soloArrowRightHOffset:20,
soloArrowRightVOffset:20,
touchenabled:"on",
onHoverStop:"on"
});
jQuery('#slider2').revolution(
{
delay:4000,
startwidth:1170,
startheight:500,
hideThumbs:200,
thumbWidth:150,
thumbHeight:50,
thumbAmount:3,
navigationType:"thumb",
navigationArrows:"none",
navigationStyle:"round",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:20,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:20,
touchenabled:"on",
onHoverStop:"on"
});
jQuery('#slider3').revolution(
{
delay:4000,
startwidth:1170,
startheight:500,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:5,
navigationType:"bullet",
navigationArrows:"none",
navigationStyle:"round",
navigationHAlign:"left",
navigationVAlign:"top",
navigationHOffset:30,
navigationVOffset:30,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"bottom",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:20,
soloArrowRightHalign:"right",
soloArrowRightValign:"bottom",
soloArrowRightHOffset:20,
soloArrowRightVOffset:20,
touchenabled:"on",
onHoverStop:"on"
});
jQuery('#slider4').revolution(
{
delay:4000,
startwidth:1170,
startheight:500,
hideThumbs:300,
thumbWidth:150,
thumbHeight:50,
thumbAmount:3,
navigationType:"none",
navigationArrows:"solo",
navigationStyle:"round",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"bottom",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:20,
soloArrowRightHalign:"left",
soloArrowRightValign:"bottom",
soloArrowRightHOffset:70,
soloArrowRightVOffset:20,
touchenabled:"on",
onHoverStop:"on"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>Change Navigation Style via CSS</h2>
<p>You can turn on / off independent the Arrows and Bullets in the Slider. You can use Bullets or Thumbnails. You can set independent the position of arrows, thumbnails and bullets.</p>
<p>Since Slider Revolution has a few prepared style of Thumbnails, bullets and Arrows, you dont need to style them at all. However in some cases you wish to have your own styled navigation buttons.For this we show you how to do so:</p>
<div style="width:100%;height:20px"></div>
<h3>Change the the Navigation via Options</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:3,
navigationType:"bullet", <span style="color:#2980b9 !important">// use none, bullet or thumb</span>
navigationArrows:"solo", <span style="color:#2980b9 !important">// nexttobullets, solo (old name verticalcentered), none</span>
navigationStyle:"round", <span style="color:#2980b9 !important">// round, square, navbar, round-old, square-old, navbar-old </span>
navigationHAlign:"center", <span style="color:#2980b9 !important">// left,center,right</span>
navigationVAlign:"bottom", <span style="color:#2980b9 !important">// top,center,bottom</span>
navigationHOffset:0, <span style="color:#2980b9 !important">// offset position from aligned position</span>
navigationVOffset:0, <span style="color:#2980b9 !important">// offset position from aligned position</span>
soloArrowLeftHalign:"left", <span style="color:#2980b9 !important">// left,center,right</span>
soloArrowLeftValign:"bottom",<span style="color:#2980b9 !important">// top,center,bottom</span>
soloArrowLeftHOffset:20, <span style="color:#2980b9 !important">// offset position from aligned position</span>
soloArrowLeftVOffset:20, <span style="color:#2980b9 !important">// offset position from aligned position</span>
soloArrowRightHalign:"right", <span style="color:#2980b9 !important">// left,center,right</span>
soloArrowRightValign:"bottom", <span style="color:#2980b9 !important">// top,center,bottom</span>
soloArrowRightHOffset:20, <span style="color:#2980b9 !important">// offset position from aligned position</span>
soloArrowRightVOffset:20, <span style="color:#2980b9 !important">// offset position from aligned position</span>
touchenabled:"on",
onHoverStop:"on"
});
}); //ready
&lt;/script&gt;
</pre>
<div style="width:100%;height:20px"></div>
<h3>Change the Style of the Navigation Arrows via StyleSheet</h3>
<p>You can add the following lines to your Style Sheet</p>
<pre>
<strong>.tparrows</strong> {
cursor: pointer;
background: rgba(0, 0, 0, 0.5) !important;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 40px !important;
height: 40px !important;
}
<strong>.tparrows:before</strong> {
font-family: 'revicons';
color: #fff;
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
margin-right: 0;
margin-top: 9px;
text-align: center;
width: 40px;
font-size: 20px;
}
<strong>.tparrows:hover</strong> {
color: #fff;
}
<strong>.tp-leftarrow:before</strong> {
content: '\e824';
}
<strong>tp-rightarrow:before</strong> {
content: '\e825';
}
<strong>.tparrows.tp-rightarrow:before</strong> {
margin-left: 1px;
}
<strong>.tparrows:hover</strong> {
background: rgba(0, 0, 0, 1) !important;
}
</pre>
<div style="width:100%;height:20px"></div>
<h3>Change the Style of the Bullets via StyleSheet</h3>
<p>You can add the following lines to your Style Sheet</p>
<pre>
<strong>.tp-bullets.simplebullets.navbar</strong> {
height: 35px;
padding: 0px 0px;
}
<strong>.tp-bullets.simplebullets .bullet</strong> {
cursor: pointer;
position: relative !important;
background: rgba(0, 0, 0, 0.5) !important;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 6px !important;
height: 6px !important;
border: 5px solid rgba(0, 0, 0, 0) !important;
display: inline-block;
margin-right: 2px !important;
margin-bottom: 14px !important;
-webkit-transition: background-color 0.2s, border-color 0.2s;
-moz-transition: background-color 0.2s, border-color 0.2s;
-o-transition: background-color 0.2s, border-color 0.2s;
-ms-transition: background-color 0.2s, border-color 0.2s;
transition: background-color 0.2s, border-color 0.2s;
float:none !important;
}
<strong>.tp-bullets.simplebullets .bullet.last</strong> {
margin-right: 0px
}
<strong>.tp-bullets.simplebullets .bullet:hover,
.tp-bullets.simplebullets .bullet.selected</strong> {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: rgba(255, 255, 255, 1) !important;
width: 6px !important;
height: 6px !important;
border: 5px solid rgba(0, 0, 0, 1) !important;
}
</pre>
</section>
</body>

View File

@@ -0,0 +1,405 @@
<<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="active" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="20"
data-y="20"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Try The Buttons below the Slider
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption sft customout"
data-x="center" data-hoffset="134"
data-y="center" data-voffset="-6"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1000"
data-easing="Power4.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeOut"
data-autoplay="false"
data-autoplayonlyfirsttime="false"
data-nextslideatend="false"
style="z-index: 8"><iframe src='http://www.youtube.com/embed/aQYAykwgzGo?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0' width='640' height='360' style='width:640px;height:360px;'></iframe>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="20"
data-y="20"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Try The Buttons below the Slider
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="20"
data-y="20"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Try The Buttons below the Slider
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="20"
data-y="20"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Try The Buttons below the Slider
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!--
###############################
- THE API EXAMPLE -
###############################
-->
<div style="width:100%;height:20px"></div>
<div class="api-examples" style="text-align:center; margin-bottom:20px;">
<input type="button" id="pause" value="pause">
<input type="button" id="resume" value="resume">
<input type="button" id="prev" value="prev">
<input type="button" id="next" value="next">
<input type="button" id="show" value="show slide 3">
<input type="button" id="length" value="length">
<input type="button" id="current" value="current">
<input type="button" id="lastslide" value="last played">
<input type="button" id="redraw" value="redraw">
</div>
<h2 style="text-align:center" class="results" id="callbackinfo">Function Events</h2>
<h2 style="text-align:center" class="results" id="stopinfo">Slider Loop Events</h2>
<h2 style="text-align:center" class="results" id="videoinfo">Video Events</h2>
<h2 style="text-align:center" class="results" id="otherevents">Other Events</h2>
<h2 style="text-align:center" class="results" id="loadevent">Loaded Events</h2>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10
});
//########################################
// - API HANDLING -
//########################################
// listen for slide change event
revapi.bind("revolution.slide.onchange",function (e,data) {
jQuery('#callbackinfo').html('Last Event: Slide Changed to '+data.slideIndex).addClass("changecolor");
setTimeout(function() {
jQuery('#callbackinfo').removeClass("changecolor");
},500)
});
revapi.bind("revolution.slide.onpause",function (e,data) {
jQuery('#callbackinfo').html('Last Event: Timer Pause ').addClass("changecolor");
setTimeout(function() {
jQuery('#callbackinfo').removeClass("changecolor");
},500)
;
});
revapi.bind("revolution.slide.onresume",function (e,data) {
jQuery('#callbackinfo').html('Last Event: Timer Resume ').addClass("changecolor");
setTimeout(function() {
jQuery('#callbackinfo').removeClass("changecolor");
},500)
;
});
revapi.bind("revolution.slide.onvideoplay",function (e,data) {
jQuery('#videoinfo').html('YouTube / Vimeo Video Playing ').addClass("changecolor");
setTimeout(function() {
jQuery('#videoinfo').removeClass("changecolor");
},500);
});
revapi.bind("revolution.slide.onvideostop",function (e,data) {
jQuery('#videoinfo').html('YouTube / Vimeo Video Stopped').addClass("changecolor");
setTimeout(function() {
jQuery('#videoinfo').removeClass("changecolor");
},500);
});
revapi.bind("revolution.slide.onstop",function (e,data) {
jQuery('#stopinfo').html('Slider Stopped ').addClass("changecolor");
setTimeout(function() {
jQuery('#stopinfo').removeClass("changecolor");
},500);
});
revapi.bind("revolution.slide.onbeforeswap",function (e) {
jQuery('#otherevents').html('Slider going to swap').addClass("changecolor");
setTimeout(function() {
jQuery('#otherevents').removeClass("changecolor");
},500);
});
revapi.bind("revolution.slide.onafterswap",function (e) {
jQuery('#otherevents').html('Slider is ready with swap').addClass("changecolor");
setTimeout(function() {
jQuery('#otherevents').removeClass("changecolor");
},500);
});
revapi.bind("revolution.slide.onloaded",function (e) {
jQuery('#loadevent').html('Slider is Loaded').addClass("changecolor");
alert("Slider loaded")
setTimeout(function() {
jQuery('#loadevent').removeClass("changecolor");
},500);
});
// bind to button click
jQuery("input").click(apiHandler)
function apiHandler(e) {
switch (e.currentTarget.id) {
case "pause":
revapi.revpause();
break;
case "resume":
revapi.revresume()
break;
case "prev":
revapi.revprev()
break;
case "next":
revapi.revnext()
break;
case "show":
revapi.revshowslide(3);
break;
case "length":
alert(revapi.revmaxslide());
break;
case "current":
alert(revapi.revcurrentslide());
break;
case "lastslide":
alert(revapi.revlastslide());
break;
case "redraw":
revapi.revredraw();
break;
}
return false;
}
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>What are API and Methods/Events ?</h2>
<p>An application programming interface (API) specifies how some software components should interact with each other. Slider Revolution use following Methods:</p>
<div style="width:100%;height:20px"></div>
<ul style="font-size:13px;line-height:20px;">
<li>Pause: <span style="color:#e74c3c">revpause()</span></li>
<li>Resume: <span style="color:#e74c3c">revresume()</span></li>
<li>Previous Slide: <span style="color:#e74c3c">revprev()</span></li>
<li>Next Slide: <span style="color:#e74c3c">revnext()</span></li>
<li>Show Spec. Slide: <span style="color:#e74c3c">revshowslide(slidenr)</span></li>
<li>Amounts of Slides: <span style="color:#e74c3c">revmaxslide()</span> returns amount of slides</li>
<li>Current Slide: <span style="color:#e74c3c">revmaxslide()</span> returns current slide nr.</li>
<li>Last Played Slide: <span style="color:#e74c3c">revlastslide()</span> returns last played slide nr.</li>
</ul>
<div style="width:100%;height:20px"></div>
<p>Slider Revolution Triggers following Events</p>
<div style="width:100%;height:20px"></div>
<ul style="font-size:13px;line-height:20px;">
<li>Slider has been succesfully initialised: <span style="color:#e74c3c">revolution.slide.onloaded</span></li>
<li>Slider swap between two slides: <span style="color:#e74c3c">revolution.slide.onchange</span>returns as data.slideIndex the next Slide Nr.</li>
<li>Slider changed to Pause mode: <span style="color:#e74c3c">revolution.slide.onpause</span></li>
<li>Slider is back from Pause Mode: <span style="color:#e74c3c">revolution.slide.onresume</span></li>
<li>Video Playing has been started: <span style="color:#e74c3c">revolution.slide.onvideoplay</span></li>
<li>Video Playing has been stopped: <span style="color:#e74c3c">revolution.slide.onvideostop</span></li>
<li>Slider stopped: <span style="color:#e74c3c">revolution.slide.onstop</span></li>
<li>Slider has been called to change the slide (before transition): <span style="color:#e74c3c">revolution.slide.onbeforeswap</span></li>
<li>Slider has been finnished the Slide Change (after transition): <span style="color:#e74c3c">revolution.slide.onafterswap</span> </li>
</ul>
</section>
</body>

View File

@@ -0,0 +1,240 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="active" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 1
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 2
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 3
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="0"
data-y="0"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Slide 4
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
shuffle:"on"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>Shuffle Mode</h2>
<p>Activate simple the Shuffle Mode of the slider via the option shuffle:"on". It reorders at load the slider, but till new load, it will stay in this order.</p>
<div style="width:100%;height:20px"></div>
<h3> Initialise the Plugin somewhere in the Body Footer:</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
<strong>shuffle:"on"</strong>
});
});
&lt;/script&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,346 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="active" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/transparent.png" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Transparent Background
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/transparent.png" style="background-color:#34495e" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Colored Background
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" style="background-color:#34495e" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Covering Left Top Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Covering Center Center Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="right bottom" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Covering Right Bottom Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Containing Center Center Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="right bottom" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Containing Right Bottom Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/apple.png" alt="slidebg1" data-bgfit="normal" data-bgposition="center center" data-bgrepeat="repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Repeating Background
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:400,
hideThumbs:10,
lazyLoad:"on",
forceFullWidth:"on",
fullWidth:"on"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>Different Backgrounds</h2>
<p>You can set the Main Background transparent, Colored, or via an image source. Change the Image aligns, cover/contain/normal fillings and Repeating via the data options</p>
<div style="width:100%; height:20px"></div>
<h3>Transparent Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/transparent.png"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Colored Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/transparent.png" style="background-color:#ff0000"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Aligned Covering Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/someimage.png"</strong> alt="slidebg1" <strong>data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"</strong>&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Aligned Containing Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/someimage.png"</strong> alt="slidebg1" <strong>data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat"</strong>&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Repeated Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/tiledimage.png"</strong> alt="slidebg1" <strong>data-bgfit="normal" data-bgposition="top left" data-bgrepeat="repeat"</strong>&gt;
...
</pre>
</section>
</body>

View File

@@ -0,0 +1,286 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="active" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">HIDE CAPTIONS<br>IN MOBILE VIEW
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">HIDE UNDER 500PX WITH ALL OTHER
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">HIDE ALREADY UNDER 650PX
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">HIDE CAPTIONS<br>IN MOBILE VIEW
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">HIDE UNDER 500PX WITH ALL OTHER
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">HIDE ALREADY UNDER 650PX
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
hideCaptionAtLimit:650,
hideAllCaptionAtLimit:400
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>How to Hide Captions?</h2>
<p>Captions can be hided one by one per local options, or All in same time in a global option</p>
<div style="width:100%;height:20px"></div>
<h3>Caption Hidden One By One</h3>
<pre>
&lt;div class="tp-caption medium_bg_asbestos lft"
<strong>data-x="center"
data-y="center"
data-hoffset="0"
data-voffset="0"</strong>
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
<strong>data-captionhidden="on"</strong>
style="z-index: 6"&gt;HIDE ALREADY AT 650PX
&lt;/div&gt;
</pre>
<div style="width:100%;height:20px"></div>
<h3> Initialise the Plugin somewhere in the Body Footer:</h3>
<pre>
&lt;script type="text/javascript"&gt;
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
<strong>hideCaptionAtLimit:650,
hideAllCaptionAtLimit:400</strong>
});
});
&lt;/script&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,329 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="active" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->
<li data-transition="fade" data-slotamount="1" data-masterspeed="400" data-delay="5000" >
<!-- MAIN IMAGE -->
<img src="images/kenburns1.jpg" alt="kenburns1" data-bgposition="left bottom" data-kenburns="on" data-duration="2000" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100" data-bgpositionend="center top">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption large_bg_black customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-70"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="400"
data-easing="Power4.easeOut"
data-end="1500"
data-endspeed="500"
data-endeasing="Power4.easeIn"
style="z-index: 2">Hi Everyone
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption large_bg_black customin stl tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-70"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="300"
data-start="2000"
data-easing="Back.easeOut"
data-end="3000"
data-endspeed="500"
data-endeasing="Power4.easeIn"
style="z-index: 3">I'm Up Here
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption largepinkbg customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-70"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="300"
data-start="3500"
data-easing="Back.easeOut"
data-endspeed="300"
data-endeasing="Back.easeIn"
style="z-index: 4"><strong>Revolution Slider</strong> Ken Burns Effect
</div>
</li>
<!-- SLIDE -->
<li data-transition="flyin" data-slotamount="1" data-masterspeed="1000" >
<!-- MAIN IMAGE -->
<img src="images/kenburns2.jpg" alt="kenburns2" data-bgposition="left bottom" data-kenburns="on" data-duration="10000" data-ease="Power0.easeIn" data-bgfit="120" data-bgfitend="100" data-bgpositionend="right top">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption largeblackbg lfl customout tp-resizeme"
data-x="100"
data-y="bottom" data-voffset="-142"
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="2300"
data-easing="Power4.easeInOut"
data-endspeed="300"
style="z-index: 2">Ken Burns Transitions
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption modern_big_redbg lfl customout tp-resizeme"
data-x="100"
data-y="143"
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="2000"
data-easing="Power4.easeInOut"
data-endspeed="300"
style="z-index: 3">Customizable
</div>
</li>
<!-- SLIDE -->
<li data-transition="cube" data-slotamount="6" data-masterspeed="200" data-delay="7000" >
<!-- MAIN IMAGE -->
<img src="images/kenburns3.jpg" alt="kenburns11" data-bgposition="left center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="115" data-bgfitend="115" data-bgpositionend="right bottom">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption large_bg_black customin stt tp-resizeme"
data-x="center" data-hoffset="0"
data-y="180"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="500"
data-easing="Back.easeOut"
data-end="3000"
data-endspeed="300"
style="z-index: 2">Premium Features
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption large_bg_black sfb stt tp-resizeme"
data-x="center" data-hoffset="0"
data-y="180"
data-speed="600"
data-start="3300"
data-easing="Back.easeOut"
data-endspeed="300"
style="z-index: 3">Added Frequently
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_red customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-100"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="4000"
data-easing="Back.easeOut"
data-endspeed="300"
style="z-index: 4"><a href="http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380?ref=themepunch" target="_blank">Get Revolution Slider</a>
</div>
</li>
<!-- SLIDE -->
<li data-transition="parallaxtoright" data-slotamount="7" data-masterspeed="600" >
<!-- MAIN IMAGE -->
<img src="images/kenburns4.jpg" alt="kenburns5" data-bgposition="right bottom" data-kenburns="on" data-duration="11000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="130" data-bgpositionend="left top">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption largeblackbg customin customout tp-resizeme"
data-x="right" data-hoffset="-60"
data-y="center" data-voffset="0"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="500"
data-easing="Power3.easeInOut"
data-endspeed="300"
style="z-index: 2">Create Amazing Sliders
</div>
</li>
<!-- SLIDE -->
<li data-transition="parallaxtotop" data-slotamount="7" data-masterspeed="600" data-delay="4500" >
<!-- MAIN IMAGE -->
<img src="images/kenburns5.jpg" alt="kenburns9" data-bgposition="center center" data-kenburns="on" data-duration="1500" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100" data-bgpositionend="center center">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption smoothcircle customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="0"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="0"
data-easing="Power4.easeInOut"
data-end="1000"
data-endspeed="300"
style="z-index: 2">Spot On!
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption large_bg_black customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-70"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1500"
data-easing="Power4.easeInOut"
data-endspeed="300"
style="z-index: 3">Products By ThemePunch
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:400,
hideThumbs:200,
shadow:2,
fullWidth:"on"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<div style="width:100%;height:40px"></div>
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>The Ken Burns Effect?</h2>
<p>If you use the settings Background Fit, Background Fit End, Background Align and Background Align End, you can create great Background Zoom Effects </p>
<div style="width:100%;height:20px"></div>
<h3>How does a Slide Markup Looks like then ?</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="1" data-masterspeed="400" data-delay="5000" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img src="images/kenburns1.jpg"
alt="kenburns1"
<strong>data-kenburns="on"
data-bgposition="left bottom"
data-bgpositionend="center top"
data-bgfit="200"
data-bgfitend="100"
data-duration="2000"
data-ease="Power4.easeInOut"</strong>
&gt;
&lt;/li&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,313 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="active" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000" data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7">
<!-- MAIN IMAGE -->
<img src="images/video_forest.jpg" alt="video_forest" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="0"
data-speed="1000"
data-start="1100"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 2">
<video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
poster='images/video_forest.jpg' >
<source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' />
<source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' />
<source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' />
</video>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption large_bold_white_25 customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="170"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1400"
data-easing="Power4.easeOut"
data-endspeed="600"
data-endeasing="Power0.easeIn"
style="z-index: 3">The clearest way into the Universe<br/>is through a forest wilderness.
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_text_shadow customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-140"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1700"
data-easing="Power4.easeOut"
data-endspeed="600"
data-endeasing="Power0.easeIn"
style="z-index: 4">John Muir
</div>
</li>
<!-- SLIDE -->
<li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000" data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7">
<!-- MAIN IMAGE -->
<img src="images/video_forest.jpg" alt="video_forest" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="0"
data-speed="1000"
data-start="1100"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 2">
<video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
poster='images/video_forest.jpg'>
<source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' />
<source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' />
<source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' />
</video>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption large_bold_white_25 customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="170"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1400"
data-easing="Power4.easeOut"
data-endspeed="600"
data-endeasing="Power0.easeIn"
style="z-index: 3">The clearest way into the Universe<br/>is through a forest wilderness.
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_text_shadow customin customout tp-resizeme"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-140"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="600"
data-start="1700"
data-easing="Power4.easeOut"
data-endspeed="600"
data-endeasing="Power0.easeIn"
style="z-index: 4">John Muir
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
fullScreen:"on",
forceFullWidth:"on",
minFullScreenHeight:"320",
videoJsPath:"rs-plugin/videojs/",
fullScreenOffsetContainer: "header"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<div style="width:100%;height:40px"></div>
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>The HTML5 Covering Video Background</h2>
<p>In case you wish to Cover the Background with a HTML5 Video, you can do so, using a HTML5 Video Caption and set its parameters to force the Covering.</p>
<p>For Best Result, set the First Frame of the HTML5 Video as "Poster Image" for the video, and also set the Main Background as the Same Image, for smooth Transitions</p>
<p>The best if you Let it Restart every time the Slides starts, so the Frame of the Animation and the first Frame of Video is same.</p>
<div style="width:100%;height:20px"></div>
<h3>How does a Slide Markup Looks like then ?</h3>
<pre>
&lt;!-- SLIDE --&gt;
&lt;li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000" data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7"&gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/video_forest.jpg"</strong> alt="video_forest" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"&gt;
&lt;!-- LAYERS --&gt;
&lt;!-- LAYER NR. 1 --&gt;
&lt;div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="0"
data-speed="1000"
data-start="1100"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
<strong>data-autoplay="true"</strong>
data-autoplayonlyfirsttime="false"
<strong>data-nextslideatend="true"</strong>
<strong>data-forceCover="1"</strong>
<strong>data-dottedoverlay="twoxtwo"</strong>
<strong>data-aspectratio="16:9"</strong>
<strong>data-forcerewind="on"</strong>
style="z-index: 2"&gt;
&lt;video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
<strong>poster='images/video_forest.jpg'</strong> data-setup="{}"&gt;
&lt;source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' /&gt;
&lt;source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' /&gt;
&lt;source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' /&gt;
&lt;/video&gt;
&lt;/div&gt;
&lt;/li&gt;
</pre>
</section>
</body>

View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="active" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<h2> A List of All Captions we use in settings.css document:</h2>
<div class="tp-caption-demo" style="background:url(images/trans_tile2.png) repeat">
<div class="tp-caption medium_grey">medium_grey</div>
<div class="tp-caption small_text">small_text</div>
<div class="tp-caption medium_text">medium_text</div>
<div class="tp-caption large_text">large_text</div>
<div class="tp-caption very_large_text">very_large_text</div>
<div class="tp-caption very_big_white">very_big_white</div>
<div class="tp-caption very_big_black">very_big_black</div>
<div class="tp-caption modern_medium_fat">modern_medium_fat</div>
<div class="tp-caption modern_medium_fat_white">modern_medium_fat_white</div>
<div class="tp-caption modern_medium_light">modern_medium_light</div>
<div class="tp-caption modern_big_bluebg">modern_big_bluebg</div>
<div class="tp-caption modern_big_redbg">modern_big_redbg</div>
<div class="tp-caption modern_small_text_dark">modern_small_text_dark</div>
<div class="tp-caption thinheadline_dark">thinheadline_dark</div>
<div class="tp-caption thintext_dark">thintext_dark</div>
<div class="tp-caption largeblackbg">largeblackbg</div>
<div class="tp-caption largepinkbg">largepinkbg</div>
<div class="tp-caption largewhitebg">largewhitebg</div>
<div class="tp-caption largegreenbg">largegreenbg</div>
<div class="tp-caption excerpt">excerpt</div>
<div class="tp-caption large_bold_grey">large_bold_grey</div>
<div class="tp-caption medium_thin_grey">medium_thin_grey</div>
<div class="tp-caption small_thin_grey">small_thin_grey</div>
<div class="tp-caption lightgrey_divider">lightgrey_divider</div>
<div class="tp-caption large_bold_darkblue">large_bold_darkblue</div>
<div class="tp-caption medium_bg_darkblue">medium_bg_darkblue</div>
<div class="tp-caption medium_bold_red">medium_bold_red</div>
<div class="tp-caption medium_light_red">medium_light_red</div>
<div class="tp-caption medium_bg_red">medium_bg_red</div>
<div class="tp-caption medium_bold_orange">medium_bold_orange</div>
<div class="tp-caption medium_bg_orange">medium_bg_orange</div>
<div class="tp-caption large_bold_white">large_bold_white </div>
<div class="tp-caption medium_light_white ">medium_light_white</div>
<div class="tp-caption mediumlarge_light_white">mediumlarge_light_white </div>
<div class="tp-caption mediumlarge_light_white_center">mediumlarge_light_white_center </div>
<div class="tp-caption medium_bg_asbestos">medium_bg_asbestos </div>
<div class="tp-caption medium_light_black">medium_light_black </div>
<div class="tp-caption large_bold_black"> large_bold_black</div>
<div class="tp-caption mediumlarge_light_darkblue">mediumlarge_light_darkblue </div>
<div class="tp-caption small_light_white">small_light_white </div>
<div class="tp-caption large_bg_black">large_bg_black </div>
<div class="tp-caption mediumwhitebg">mediumwhitebg </div>
</div>
<div style="width:100%;height:40px"></div>
<h2>How to use ? </h2>
<p>Simple Copy this Class and add to your DIV container with tp-caption, there where you need</p>
</article>
</body>

View File

@@ -0,0 +1,346 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="active" href="17.Sample-DottedBG.html">17</a>
<a class="" href="18.Sample-NewCaptionEffects.html">18</a> </article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/transparent.png" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Transparent Background
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/transparent.png" style="background-color:#34495e" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Colored Background
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" style="background-color:#34495e" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Covering Left Top Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Covering Center Center Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="right bottom" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Covering Right Bottom Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Containing Center Center Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/huge.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="right bottom" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Containing Right Bottom Aligned Image
</div>
</li>
<li data-transition="fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/apple.png" alt="slidebg1" data-bgfit="normal" data-bgposition="center center" data-bgrepeat="repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
data-x="right" data-hoffset="-90"
data-y="bottom" data-voffset="-50"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="500"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="on"
style="z-index: 21">Repeating Background
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
dottedOverlay:"twoxtwo",
delay:9000,
startwidth:1170,
startheight:400,
hideThumbs:10,
lazyLoad:"on",
forceFullWidth:"on",
fullWidth:"on"
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
<section class="container">
<h2>Different Backgrounds</h2>
<p>You can set the Main Background transparent, Colored, or via an image source. Change the Image aligns, cover/contain/normal fillings and Repeating via the data options</p>
<div style="width:100%; height:20px"></div>
<h3>Transparent Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/transparent.png"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Colored Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/transparent.png" style="background-color:#ff0000"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Aligned Covering Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/someimage.png"</strong> alt="slidebg1" <strong>data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"</strong>&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Aligned Containing Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/someimage.png"</strong> alt="slidebg1" <strong>data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat"</strong>&gt;
...
</pre>
<div style="width:100%; height:20px"></div>
<h3>Repeated Background</h3>
<pre>
&lt;li data-transition="fade" data-slotamount="7" data-masterspeed="1500" &gt;
&lt;!-- MAIN IMAGE --&gt;
&lt;img <strong>src="images/tiledimage.png"</strong> alt="slidebg1" <strong>data-bgfit="normal" data-bgposition="top left" data-bgrepeat="repeat"</strong>&gt;
...
</pre>
</section>
</body>

View File

@@ -0,0 +1,418 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<!--<article class="prevnext"><a href="02.Sample-Fullwidth.html">Next Guide <i class="revicon-right-open"></i> </a></article>-->
<article class="prevnext">
<a class="" href="01.Sample-Boxed.html">01</a>
<a class="" href="02.Sample-Fullwidth.html">02</a>
<a class="" href="03.Sample-FullScreen.html">03</a>
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
<a class="" href="05.Sample-Aligns.html">05</a>
<a class="" href="06.Sample-AlignForce.html">06</a>
<a class="" href="07.Sample-Videos.html">07</a>
<a class="" href="08.Sample-NavigationStyle.html">08</a>
<a class="" href="09.Sample-Api.html">09</a>
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
<a class="" href="11.Sample-Shuffle.html">11</a>
<a class="" href="12.Sample-Backgrounds.html">12</a>
<a class="" href="13.Sample-HideCaptions.html">13</a>
<a class="" href="14.Sample-KenBurns.html">14</a>
<a class="" href="15.Sample-VideoBG.html">15</a>
<a class="" href="16.Caption-ShowDown.html">16</a>
<a class="" href="17.Sample-DottedBG.html">17</a>
<a class="active" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<div class="tp-banner-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" data-delay="5000" >
<!-- MAIN IMAGE -->
<img src="images/slidebg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption big_dark customin customout"
data-x="center"
data-y="200"
data-captionhidden="on"
data-splitin="words"
data-elementdelay="0.25"
data-start="200"
data-speed="600"
data-easing="Back.easeOut"
data-customin="x:0;y:-20;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-frames="{ typ :lines;
elementdelay :0.1;
start:1650;
speed:500;
ease:Power3.easeOut;
animation:x:0;y:-40;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
},
{ typ :lines;
elementdelay :0.1;
start:2150;
speed:500;
ease:Power3.easeOut;
animation:x:0;y:-20;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
},
{
elementdelay :0.1;
start:3200;
speed:500;
ease:Power3.easeOut;
animation:x:-240;y:13;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.12;scaleY:0.12;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
},
{typ:chars;
elementdelay :0.1;
start:4000;
speed:1500;
ease:Power3.easeInOut;
animation:x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:720;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
}
"
data-splitout="words"
data-endelementdelay="0.1"
data-customout="x:0;y:0;z:0;rotationX:40;rotationY:70;rotationZ:0;scaleX:0.85;scaleY:0.85;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-endspeed="500"
data-endeasing="Power4.easeIn"
style="z-index: 4">SLIDER REVOLUTION
</div>
<div class="tp-caption medium_dark customin customout"
data-x="center"
data-y="260"
data-splitin="chars"
data-elementdelay="0.05"
data-start="600"
data-speed="600"
data-easing="Back.easeOut"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-frames="{ typ :lines;
elementdelay :0.1;
start:1650;
speed:500;
ease:Power3.easeOut;
animation:x:0;y:-40;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
},
{ typ :lines;
elementdelay :0.1;
start:2150;
speed:500;
ease:Power3.easeOut;
animation:x:0;y:-20;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
}
"
data-splitout="lines"
data-endelementdelay="0.1"
data-customout="x:-230;y:-20;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.2;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%"
data-endspeed="500"
data-end="3200"
data-endeasing="Back.easeIn"
data-captionhidden="on"
style="z-index: 4">TYPOGRAPHY
</div>
<div class="tp-caption medium_dark customin customout"
data-x="center"
data-y="250"
data-splitin=""
data-elementdelay=""
data-start="1600"
data-speed="600"
data-easing="Power3.easeOut"
data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-frames="{ typ :lines;
elementdelay :0.1;
start:2150;
speed:500;
ease:Power3.easeOut;
animation:x:0;y:-20;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
}"
data-splitout="lines"
data-endelementdelay="0.1"
data-customout="x:-230;y:-20;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.2;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%"
data-endspeed="500"
data-end="3200"
data-endeasing="Back.easeIn"
data-captionhidden="on"
style="font-size:60px;line-height:60px;font-weight:300;letter-spacing:0px;">UNLIMITED POSSIBILITIES
</div>
<div class="tp-caption medium_dark customin customout"
data-x="center"
data-y="270"
data-splitin=""
data-elementdelay=""
data-start="2150"
data-speed="600"
data-easing="Power3.easeOut"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 100%;"
data-splitout="lines"
data-endelementdelay="0.1"
data-customout="x:-230;y:-20;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.2;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%"
data-endspeed="500"
data-end="3200"
data-endeasing="Back.easeIn"
data-captionhidden="on"
style="font-size:55px;line-height:55px;font-weight:400;letter-spacing:0px;">go and grab it today
</div>
<div class="tp-caption medium_dark customin customout"
data-x="center"
data-y="150"
data-splitin="chars"
data-elementdelay="0.1"
data-start="2150"
data-speed="1500"
data-easing="Power3.easeOut"
data-customin="x:350;y:200;z:0;rotationX:0;rotationY:0;rotationZ:-120;scaleX:8;scaleY:8;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:220% 190%;"
data-splitout="lines"
data-endelementdelay="0"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-end="4000"
data-endspeed="1500"
data-endeasing="Power3.easeInOut"
data-captionhidden="on"
style="font-size:155px;line-height:155px;font-weight:300;letter-spacing:0px;">S mplified
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-delay="999999" >
<!-- MAIN IMAGE -->
<img src="images/transparent.png" alt="slidebg1" style="background-color:rgb(45,49,54)" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption huge_red customin customout"
data-x="200"
data-y="225"
data-splitin="chars"
data-elementdelay="0.05"
data-start="700"
data-speed="600"
data-easing="Back.easeOut"
data-customin="x:-40;y:-30;z:0;rotationX:0;rotationY:0;rotationZ:-70;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-splitout=""
data-endelementdelay="0"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:190;rotationZ:0;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-end="90000"
data-endspeed="1500"
data-endeasing="Power3.easeInOut"
data-captionhidden="on"
style="z-index:5"
>CUSTOMIZED
</div>
<div class="tp-caption middle_yellow customin customout"
data-x="210"
data-y="180"
data-splitin="chars"
data-elementdelay="0.1"
data-start="500"
data-speed="300"
data-easing="Power3.easeOut"
data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0.4;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 20%;"
data-splitout="lines"
data-endelementdelay="0"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-end="90000"
data-endspeed="1500"
data-endeasing="Power3.easeInOut"
data-captionhidden="on"
>READY TO
</div>
<div class="tp-caption middle_yellow customin customout"
data-x="705"
data-y="180"
data-splitin="chars"
data-elementdelay="0.07"
data-start="900"
data-speed="300"
data-easing="Power3.easeOut"
data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0.4;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 20%;"
data-splitout="lines"
data-endelementdelay="0"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-end="90000"
data-endspeed="1500"
data-endeasing="Power3.easeOut"
data-captionhidden="on"
>EXAMPLES
</div>
<div class="tp-caption huge_thin_yellow customin customout"
data-x="485"
data-y="145"
data-splitin="chars"
data-elementdelay="0.2"
data-start="700"
data-speed="800"
data-easing="Power3.easeOut"
data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 20%;"
data-splitout="lines"
data-endelementdelay="0"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-end="90000"
data-endspeed="1500"
data-endeasing="Power3.easeInOut"
data-captionhidden="on"
>use
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
</body>

View File

@@ -0,0 +1,728 @@
<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<link rel="icon" type="image/png" href="images/sitelogo.png" />
<!-- commented, remove this line to use IE & iOS favicons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<!-- CSS STYLE -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
<link rel="stylesheet" type="text/css" href="editor/editor.css" media="screen" />
<!-- THE ICON FONTS -->
<link rel="stylesheet" href="editor/type/fontello.css">
<script type="text/javascript" src="editor/editor.js"></script>
<!-- jQuery REVOLUTION Slider -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<header>
<section class="container">
<article class="logo-container"><div class="logo"></div></article>
<div class="clear"></div>
</section>
</header> <!-- END OF HEADER -->
<!--
#################################
- THEMEPUNCH BANNER -
#################################
-->
<article class="spectaculus">
<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->
<div class="fullwidthbanner-container roundedcorners">
<div class="fullwidthbanner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">BASIC CAPTION<br>ANIMATIONS
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos fade"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">FADE
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM LEFT (sfl)
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="350"
data-speed="800"
data-start="1900"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SKEW FROM LEFT (skewfromleft)
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos sft"
data-x="50"
data-y="200"
data-speed="800"
data-start="2600"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM TOP (sft)
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos lft"
data-x="50"
data-y="400"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM TOP (lft)
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos sfr"
data-x="right"
data-hoffset="-50"
data-y="200"
data-speed="800"
data-start="4000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM RIGHT (sfr)
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="250"
data-speed="800"
data-start="4700"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SKEW FROM RIGHT (skewfromright)
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos sfb"
data-x="right"
data-hoffset="-50"
data-y="300"
data-speed="800"
data-start="5400"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">SHORT FROM BOTTOM (sfb)
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos lfb"
data-x="right"
data-hoffset="-50"
data-y="350"
data-speed="800"
data-start="6100"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM BOTTOM (lfb)
</div>
<!-- LAYER NR. 10 -->
<div class="tp-caption medium_bg_asbestos randomrotate"
data-x="right"
data-hoffset="-50"
data-y="400"
data-speed="800"
data-start="6800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">RANDOM ROTATE (randomrotate)
</div>
<!-- LAYER NR. 11 -->
<div class="tp-caption medium_bg_asbestos lfr"
data-x="right"
data-hoffset="-50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM RIGHT (lfr)
</div>
<!-- LAYER NR. 12 -->
<div class="tp-caption medium_bg_asbestos lfl"
data-x="50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">LONG FROM LEFT (lfl)
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER 0 -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="50"
data-hoffset="0"
data-y="50"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">SOME FANCY EASING
</div>
<!-- LAYER NR. 1 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="250"
data-speed="500"
data-start="800"
data-easing="Power1.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power1.easeOut
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption medium_bg_asbestos sfl"
data-x="50"
data-y="300"
data-speed="500"
data-start="1200"
data-easing="Back.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Back.easeOut
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="350"
data-speed="800"
data-start="1900"
data-easing="Elastic.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Elastic.easeOut
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="200"
data-speed="800"
data-start="2600"
data-easing="Power3.easeInOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power3.easeInOut
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="400"
data-speed="800"
data-start="3300"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power4.easeOut
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="200"
data-speed="800"
data-start="4000"
data-easing="Power2.easeInOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Power2.easeInOut
</div>
<!-- LAYER NR. 7 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="250"
data-speed="800"
data-start="4700"
data-easing="Circ.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Circ.easeOut
</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="300"
data-speed="800"
data-start="5400"
data-easing="Cube.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Cube.easeOut
</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="350"
data-speed="800"
data-start="6100"
data-easing="Bounce.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Bounce.easeOut
</div>
<!-- LAYER NR. 10 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="400"
data-speed="800"
data-start="6800"
data-easing="Linear.easeNone"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Linear.easeNone
</div>
<!-- LAYER NR. 11 -->
<div class="tp-caption medium_bg_asbestos skewfromright"
data-x="right"
data-hoffset="-50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Expo.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Expo.easeOut
</div>
<!-- LAYER NR. 12 -->
<div class="tp-caption medium_bg_asbestos skewfromleft"
data-x="50"
data-y="450"
data-speed="800"
data-start="7500"
data-easing="Expo.easeIn"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">Expo.easeIn
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYERS -->
<div class="tp-caption mediumlarge_light_white_center customin customout start"
data-x="right"
data-hoffset="-60"
data-y="bottom"
data-voffset="-120"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">GO AND GIVE A TRY
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" >
<!-- MAIN IMAGE -->
<img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 5 -->
<div class="tp-caption medium_bg_asbestos skewfromleft customout"
data-x="104"
data-y="154"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="800"
data-start="800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="on"
style="z-index: 6">CREATE AWESOME ANIMATIONS
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.fullwidthbanner').revolution(
{
delay:15000,
startwidth:1170,
startheight:500,
hideThumbs:10,
thumbWidth:100,
thumbHeight:50,
thumbAmount:5,
navigationType:"both",
navigationArrows:"solo",
navigationStyle:"round",
touchenabled:"on",
onHoverStop:"on",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:0,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"on",
fullScreen:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
forceFullWidth:"off",
hideThumbsOnMobile:"off",
hideBulletsOnMobile:"on",
hideArrowsOnMobile:"on",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:768,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
videoJsPath:"plugins/revslider/rs-plugin/videojs/",
fullScreenOffsetContainer: ""
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
<!-- Content End -->
</article> <!-- END OF SPECTACULUS -->
<article class="content hidemeonmobile">
<!-- THE TOOLPAD -->
<section class="container">
<article class="toolpad">
<!--<section class="tryme"></section>-->
<section class="tool first" id="transitselector">
<div class="tooltext norightcorner long" id="mranim" style="cursor:pointer">Fade</div>
<div class="toolcontrols short">
<div class="toolcontroll noleftcorner"><div class="icon-up-dir-1 centertop"></div><div class="icon-down-dir-1 centerbottom"></div></div>
</div>
<div class="transition-selectbox-holder">
<div class="transition-selectbox">
<ul>
<li class="animchanger" data-anim="">Flat Fade Transitions</li>
<li class="animchanger" data-anim="fade">Fade</li>
<li class="animchanger" data-anim="boxfade">Fade Boxes</li>
<li class="animchanger" data-anim="slotfade-horizontal">Fade Slots Horizontal</li>
<li class="animchanger" data-anim="slotfade-vertical">Fade Slots Vertical</li>
<li class="animchanger" data-anim="fadefromright">Fade and Slide from Right</li>
<li class="animchanger" data-anim="fadefromleft">Fade and Slide from Left</li>
<li class="animchanger" data-anim="fadefromtop">Fade and Slide from Top</li>
<li class="animchanger" data-anim="fadefrombottom">Fade and Slide from Bottom</li>
<li class="animchanger" data-anim="fadetoleftfadefromright">Fade To Left and Fade From Right</li>
<li class="animchanger" data-anim="fadetorightfadetoleft">Fade To Right and Fade From Left</li>
<li class="animchanger" data-anim="fadetobottomfadefromtop">Fade To Top and Fade From Bottom</li>
<li class="animchanger" data-anim="fadetotopfadefrombottom">Fade To Bottom and Fade From Top</li>
</ul>
<ul>
<li class="animchanger" data-anim="">Flat Zoom Transitions</li>
<li class="animchanger" data-anim="scaledownfromright">Zoom Out and Fade From Right</li>
<li class="animchanger" data-anim="scaledownfromleft">Zoom Out and Fade From Left</li>
<li class="animchanger" data-anim="scaledownfromtop">Zoom Out and Fade From Top</li>
<li class="animchanger" data-anim="scaledownfrombottom">Zoom Out and Fade From Bottom</li>
<li class="animchanger" data-anim="zoomout">ZoomOut</li>
<li class="animchanger" data-anim="zoomin">ZoomIn</li>
<li class="animchanger" data-anim="slotzoom-horizontal">Zoom Slots Horizontal</li>
<li class="animchanger" data-anim="slotzoom-vertical">Zoom Slots Vertical</li>
</ul>
<ul>
<li class="animchanger" data-anim="">Flat Parallax Transitions</li>
<li class="animchanger" data-anim="parallaxtoright">Parallax to Right</li>
<li class="animchanger" data-anim="parallaxtoleft">Parallax to Left</li>
<li class="animchanger" data-anim="parallaxtotop">Parallax to Top</li>
<li class="animchanger" data-anim="parallaxtobottom">Parallax to Bottom</li>
</ul>
<ul>
<li class="animchanger" data-anim="">Flat Slide Transitions</li>
<li class="animchanger" data-anim="slideup">Slide To Top</li>
<li class="animchanger" data-anim="slidedown">Slide To Bottom</li>
<li class="animchanger" data-anim="slideright">Slide To Right</li>
<li class="animchanger" data-anim="slideleft">Slide To Left</li>
<li class="animchanger" data-anim="slidehorizontal">Slide Horizontal (depending on Next/Previous)</li>
<li class="animchanger" data-anim="slidevertical">Slide Vertical (depending on Next/Previous)</li>
<li class="animchanger" data-anim="boxslide">Slide Boxes</li>
<li class="animchanger" data-anim="slotslide-horizontal">Slide Slots Horizontal</li>
<li class="animchanger" data-anim="slotslide-vertical">Slide Slots Vertical</li>
<li class="animchanger" data-anim="curtain-1">Curtain from Left</li>
<li class="animchanger" data-anim="curtain-2">Curtain from Right</li>
<li class="animchanger" data-anim="curtain-3">Curtain from Middle</li>
</ul>
<ul>
<li class="animchanger" data-anim="">Premium Transitions</li>
<li class="animchanger" data-anim="3dcurtain-horizontal">3D Curtain Horizontal</li>
<li class="animchanger" data-anim="3dcurtain-vertical">3D Curtain Vertical</li>
<li class="animchanger" data-anim="cubic">Cube Vertical</li>
<li class="animchanger" data-anim="cubic-horizontal">Cube Horizontal</li>
<li class="animchanger" data-anim="incube">In Cube Vertical</li>
<li class="animchanger" data-anim="incube-horizontal">In Cube Horizontal</li>
<li class="animchanger" data-anim="turnoff">TurnOff Horizontal</li>
<li class="animchanger" data-anim="turnoff-vertical">TurnOff Vertical</li>
<li class="animchanger" data-anim="papercut">Paper Cut</li>
<li class="animchanger" data-anim="flyin">Fly In</li>
<li class="animchanger" data-anim="random-static">Random Premium</li>
<li class="animchanger" data-anim="random">Random Flat and Premium</li>
</ul>
</div>
</div>
<div class="clear"></div>
</section>
<section class="tool">
<div data-val="700" id="mrtime" class="tooltext">Time: 0.7s</div>
<div class="toolcontrols">
<div id="dectime" class="toolcontroll withspace"><i class="icon-minus"></i></div>
<div id="inctime" class="toolcontroll withspace2"><i class="icon-plus"></i></div>
</div>
<div class="clear"></div>
</section>
<section class="tool last">
<div data-val="5" class="tooltext" id="mrslot">Slots: 5</div>
<div class="toolcontrols">
<div id="decslot" class="toolcontroll withspace"><i class="icon-minus"></i></div>
<div id="incslot" class="toolcontroll withspace2"><i class="icon-plus"></i></div>
</div>
<div class="clear"></div>
</section>
<div class="clear"></div>
</article>
<!-- OUTPUT OF LAYER ANIMATIONS -->
<div class="divide40"></div>
<h2 class="redtitle">Result Of Transition</h2>
<section class="boxed-content" style="margin-top:-40px; border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;">
<pre>
&lt;!-- SLIDE --&gt;
&lt;li <strong>data-transition="<span id='resultanim'>fade</span>" data-slotamount="<span id='resultslot'>5</span>" data-masterspeed="<span id='resultspeed'>700</span>"</strong> &gt;</pre>
<div class="clear"></div>
</section><!-- END OF BOXED CONTAINER -->
</section>
</article>
<div style="width:100%;height:200px"></div>
</body>

View File

@@ -0,0 +1,119 @@
/*******************************************************************************
- BULLETS AND ARROWS ADD ONS TO THE EXISTING VERSION -
*******************************************************************************/
.tp-bannertimer {
background:#777 !important;
background:rgba(0,0,0,0.1) !important;
height:5px !important;
}
.tp-bullets.simplebullets.navbar {
height: 35px;
padding: 0px 0px;
}
.tp-bullets.simplebullets .bullet {
cursor: pointer;
position: relative !important;
background: rgba(0, 0, 0, 0.5) !important;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 6px !important;
height: 6px !important;
border: 5px solid rgba(0, 0, 0, 0) !important;
display: inline-block;
margin-right: 2px !important;
margin-bottom: 14px !important;
-webkit-transition: background-color 0.2s, border-color 0.2s;
-moz-transition: background-color 0.2s, border-color 0.2s;
-o-transition: background-color 0.2s, border-color 0.2s;
-ms-transition: background-color 0.2s, border-color 0.2s;
transition: background-color 0.2s, border-color 0.2s;
float:none !important;
}
.tp-bullets.simplebullets .bullet.last {
margin-right: 0px
}
.tp-bullets.simplebullets .bullet:hover,
.tp-bullets.simplebullets .bullet.selected {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: rgba(255, 255, 255, 1) !important;
width: 6px !important;
height: 6px !important;
border: 5px solid rgba(0, 0, 0, 1) !important;
}
.tparrows:before {
font-family: 'revicons';
color: #fff;
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
margin-right: 0;
margin-top: 9px;
text-align: center;
width: 40px;
font-size: 20px;
}
.tparrows {
cursor: pointer;
background: rgba(0, 0, 0, 0.5) !important;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 40px !important;
height: 40px !important;
}
.tparrows:hover {
color: #fff;
}
.tp-leftarrow:before {
content: '\e824';
}
.tp-rightarrow:before {
content: '\e825';
}
.tparrows.tp-rightarrow:before {
margin-left: 1px;
}
.tparrows:hover {
background: rgba(0, 0, 0, 1) !important;
}
/******************************
- SLIDER NAV STYLE DEMOS -
********************************/
#slider4container .tparrows:before,
#slider4container .tparrows:hover,
#slider4container .tparrows {
color: #000 !important;
}
#slider4container .tparrows {
background:#fff !important;
background:rgba(255,255,255,0.5) !important;
}
#slider4container .tparrows:hover {
background:#fff !important
}

View File

@@ -0,0 +1,226 @@
/**********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
YOU DONT NEED THIS CSS FILE FOR YOUR ENDPRODUCT !
USED ONLY FOR THE DEMOS AND TOOLS HERE IN THIS FOLDER
TO SHOW THE EXAMPLES.
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************
***********************************************************/
/**********************************************************
- RESET -
***********************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
* {
/* -moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
*/
}
.toolpad * {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
/***********************
- BASICS -
***********************/
body { font-family: 'Open Sans', sans-serif; color:#888; font-weight:400;}
p { font-size:13px; font-weight: 400; line-height:22px;}
h2 { color:#000; font-size:17px; font-weight:700; margin-bottom:20px;}
h2.redtitle { padding:9px 20px; width:100%; background:#e33a0c; color:#fff; box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
margin-bottom:40px;
}
h2.nobottommargin { margin-bottom:0px;}
.container { max-width:1170px;margin:auto; }
.clear { clear:both;}
.float-left { float:left;}
.float-right { float:right;}
.divide40 { width:100%; height:40px;}
.mb30 { margin-bottom:30px;}
.mlb30 { margin-left:30px; margin-bottom:30px;}
.mrb30 { margin-right:30px; margin-bottom:30px;}
.table { display:table; padding-bottom:35px;}
.table.nbp { padding-bottom:0px;}
.table-cell { display: table-cell; vertical-align: top; }
.table-cell img{ width: 220px; }
.lp30 { padding-left:30px;}
.rp30 { padding-right:30px;}
hr { border:none; border-top:2px solid #eee; margin:0px 0px 40px;}
.boxed-content hr { border:none; border-top:2px solid #eee; margin:0px -40px 40px;}
hr.nohormargin { margin: -1px -1px 40px 0px}
.one_third { width:32%; margin-right:1%; float:left;}
.one_third.last{ margin-right:0;}
a,a:visited { color:#e33a0c}
a:hover { text-decoration: none;}
.prevnext { width:615px;height:23px;position: fixed; left:50%; margin-left:-272px;top:-2px;z-index:1000;
}
.prevnext a { background:#e33a0c;font-size:10px; text-decoration: none !important; color:#fff !important;
margin-right:2px;padding:3px 8px; border-radius:0px 0px 5px 5px; -moz-border-radius:0px 0px 5px 5px;-webkit-border-radius:0px 0px 5px 5px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.prevnext a.active,
.prevnext a:hover,
.prevnext a:hover * { color:#fff !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
input[type="button"] { background-color:#3498db; border:none; color:#fff; padding:7px 10px; cursor:pointer; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
input[type="button"]:hover { background-color:#2980b9; border:none; color:#fff; padding:7px 10px;}
h2.changecolor { color:#E33A0C;}
h2.results { -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out; }
/******************************
- HEADER -
********************************/
header { width:100%; padding:20px 0px 17px 0px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.content { width:100%; padding:0px 30px 0px 30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.logo-container { float:left; width:50%;}
.logo { background:url(../images/logo.png); background-size:100%; background-position: center center; background-repeat:no-repeat;max-width:406px; min-width:340px;height:60px; }
.button-holder .button,
.button-holder .button:hover,
.button-holder .button:visited {
float: right;
background-color: #E33A0C;
color: #FFF;
text-decoration: none;
font-weight: 300;
font-size: 14px;
padding: 8px 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/******************************
- CONTAINER -
********************************/
.container { max-width:1170px; padding:30px;}
/******************************
- PRE -
********************************/
pre { font-size:12px; font-family: 'Open Sans', sans-serif; color:#888; line-height:16px; background:url(../editor/assets/prebg.png) repeat; padding:16px; padding-bottom:15px;}
pre .linedark { background:#888}
pre span { font-weight:700}
pre strong { color:#555;font-weight:800}
h3 { font-size:14px; color:#e33a0c; line-height:20px;}

View File

@@ -0,0 +1,39 @@
/*-----------------------------------------------------------------------------
KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
Screen Stylesheet
version: 1.0
date: 07/27/11
author: themepunch
email: support@themepunch.com
website: http://www.themepunch.com
-----------------------------------------------------------------------------*/
.boxedcontainer { max-width: 1170px; margin:auto; padding:0px 30px;}
/*********************************************
- SETTINGS FOR BANNER CONTAINERS -
**********************************************/
.tp-banner-container{
width:100%;
position:relative;
padding:0;
}
.tp-banner{
width:100%;
position:relative;
}
.tp-banner-fullscreen-container {
width:100%;
position:relative;
padding:0;
}

View File

@@ -0,0 +1,586 @@
/*!
* Bootstrap Responsive v2.0.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hidden {
display: none;
visibility: hidden;
}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 18px;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
/* Older Webkit */
-moz-box-sizing: border-box;
/* Older FF */
-ms-box-sizing: border-box;
/* IE8 */
box-sizing: border-box;
/* CSS3 spec*/
}
.input-prepend input[class*="span"], .input-append input[class*="span"] {
width: auto;
}
input[type="checkbox"], input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-left: 10px;
padding-right: 10px;
}
.modal {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
margin: 0;
}
.modal.fade.in {
top: auto;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}
}
@media (max-width: 767px) {
.container {
width: auto;
padding: 0 20px;
}
.row-fluid {
width: 100%;
}
.row {
margin-left: 0;
}
.row > [class*="span"], .row-fluid > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before, .row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 20px;
}
.span1 {
width: 42px;
}
.span2 {
width: 104px;
}
.span3 {
width: 166px;
}
.span4 {
width: 228px;
}
.span5 {
width: 290px;
}
.span6 {
width: 352px;
}
.span7 {
width: 414px;
}
.span8 {
width: 476px;
}
.span9 {
width: 538px;
}
.span10 {
width: 600px;
}
.span11 {
width: 662px;
}
.span12, .container {
width: 724px;
}
.offset1 {
margin-left: 82px;
}
.offset2 {
margin-left: 144px;
}
.offset3 {
margin-left: 206px;
}
.offset4 {
margin-left: 268px;
}
.offset5 {
margin-left: 330px;
}
.offset6 {
margin-left: 392px;
}
.offset7 {
margin-left: 454px;
}
.offset8 {
margin-left: 516px;
}
.offset9 {
margin-left: 578px;
}
.offset10 {
margin-left: 640px;
}
.offset11 {
margin-left: 702px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.762430939%;
}
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid > .span1 {
width: 5.801104972%;
}
.row-fluid > .span2 {
width: 14.364640883%;
}
.row-fluid > .span3 {
width: 22.928176794%;
}
.row-fluid > .span4 {
width: 31.491712705%;
}
.row-fluid > .span5 {
width: 40.055248616%;
}
.row-fluid > .span6 {
width: 48.618784527%;
}
.row-fluid > .span7 {
width: 57.182320438000005%;
}
.row-fluid > .span8 {
width: 65.74585634900001%;
}
.row-fluid > .span9 {
width: 74.30939226%;
}
.row-fluid > .span10 {
width: 82.87292817100001%;
}
.row-fluid > .span11 {
width: 91.436464082%;
}
.row-fluid > .span12 {
width: 99.999999993%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 32px;
}
input.span2, textarea.span2, .uneditable-input.span2 {
width: 94px;
}
input.span3, textarea.span3, .uneditable-input.span3 {
width: 156px;
}
input.span4, textarea.span4, .uneditable-input.span4 {
width: 218px;
}
input.span5, textarea.span5, .uneditable-input.span5 {
width: 280px;
}
input.span6, textarea.span6, .uneditable-input.span6 {
width: 342px;
}
input.span7, textarea.span7, .uneditable-input.span7 {
width: 404px;
}
input.span8, textarea.span8, .uneditable-input.span8 {
width: 466px;
}
input.span9, textarea.span9, .uneditable-input.span9 {
width: 528px;
}
input.span10, textarea.span10, .uneditable-input.span10 {
width: 590px;
}
input.span11, textarea.span11, .uneditable-input.span11 {
width: 652px;
}
input.span12, textarea.span12, .uneditable-input.span12 {
width: 714px;
}
}
@media (max-width: 979px) {
body {
padding-top: 0;
}
.navbar-fixed-top {
position: static;
margin-bottom: 18px;
}
.navbar-fixed-top .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
.navbar .nav-collapse {
clear: left;
}
.navbar .nav {
float: none;
margin: 0 0 9px;
}
.navbar .nav > li {
float: none;
}
.navbar .nav > li > a {
margin-bottom: 2px;
}
.navbar .nav > .divider-vertical {
display: none;
}
.navbar .nav .nav-header {
color: #999999;
text-shadow: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
color: #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.navbar .dropdown-menu li + li a {
margin-bottom: 2px;
}
.navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
background-color: #222222;
}
.navbar .dropdown-menu {
position: static;
top: auto;
left: auto;
float: none;
display: block;
max-width: none;
margin: 0 15px;
padding: 0;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
display: none;
}
.navbar .dropdown-menu .divider {
display: none;
}
.navbar-form, .navbar-search {
float: none;
padding: 9px 15px;
margin: 9px 0;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar .nav.pull-right {
float: none;
margin-left: 0;
}
.navbar-static .navbar-inner {
padding-left: 10px;
padding-right: 10px;
}
.btn-navbar {
display: block;
}
.nav-collapse {
overflow: hidden;
height: 0;
}
}
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
}
}
@media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before, .row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 30px;
}
.span1 {
width: 70px;
}
.span2 {
width: 170px;
}
.span3 {
width: 270px;
}
.span4 {
width: 370px;
}
.span5 {
width: 470px;
}
.span6 {
width: 570px;
}
.span7 {
width: 670px;
}
.span8 {
width: 770px;
}
.span9 {
width: 870px;
}
.span10 {
width: 970px;
}
.span11 {
width: 1070px;
}
.span12, .container {
width: 1170px;
}
.offset1 {
margin-left: 130px;
}
.offset2 {
margin-left: 230px;
}
.offset3 {
margin-left: 330px;
}
.offset4 {
margin-left: 430px;
}
.offset5 {
margin-left: 530px;
}
.offset6 {
margin-left: 630px;
}
.offset7 {
margin-left: 730px;
}
.offset8 {
margin-left: 830px;
}
.offset9 {
margin-left: 930px;
}
.offset10 {
margin-left: 1030px;
}
.offset11 {
margin-left: 1130px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.564102564%;
}
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid > .span1 {
width: 5.982905983%;
}
.row-fluid > .span2 {
width: 14.529914530000001%;
}
.row-fluid > .span3 {
width: 23.076923077%;
}
.row-fluid > .span4 {
width: 31.623931624%;
}
.row-fluid > .span5 {
width: 40.170940171000005%;
}
.row-fluid > .span6 {
width: 48.717948718%;
}
.row-fluid > .span7 {
width: 57.264957265%;
}
.row-fluid > .span8 {
width: 65.81196581200001%;
}
.row-fluid > .span9 {
width: 74.358974359%;
}
.row-fluid > .span10 {
width: 82.905982906%;
}
.row-fluid > .span11 {
width: 91.45299145300001%;
}
.row-fluid > .span12 {
width: 100%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 60px;
}
input.span2, textarea.span2, .uneditable-input.span2 {
width: 160px;
}
input.span3, textarea.span3, .uneditable-input.span3 {
width: 260px;
}
input.span4, textarea.span4, .uneditable-input.span4 {
width: 360px;
}
input.span5, textarea.span5, .uneditable-input.span5 {
width: 460px;
}
input.span6, textarea.span6, .uneditable-input.span6 {
width: 560px;
}
input.span7, textarea.span7, .uneditable-input.span7 {
width: 660px;
}
input.span8, textarea.span8, .uneditable-input.span8 {
width: 760px;
}
input.span9, textarea.span9, .uneditable-input.span9 {
width: 860px;
}
input.span10, textarea.span10, .uneditable-input.span10 {
width: 960px;
}
input.span11, textarea.span11, .uneditable-input.span11 {
width: 1060px;
}
input.span12, textarea.span12, .uneditable-input.span12 {
width: 1160px;
}
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}

View File

@@ -0,0 +1,134 @@
/*!
* Documenter 2.0
* http://rxa.li/documenter
*
* Copyright 2012, Xaver Birsak
* http://revaxarts.com
*
*/
html, body{max-width:100%;}
body{ padding-bottom: 40px;}
#documenter_content{
padding-top: 200px;
}
#documenter-cover{
min-height:600px;
}
section h3,
section h4,
section h5,
section h6 {
padding: 0;
clear: both;
line-height: 2.5em;
}
section h3{ font-size:2em;}
section h4{ font-size:1.5em;}
section h5{ font-size:1.3em;}
section h6{ font-size:1.1em;}
hr.notop{
margin-top:3px;
}
footer{
padding-bottom:500px;
}
.container{
padding-bottom:3px;
}
.navbar a.brand{
display:inline-block;
width:200px;
height:50px;
background-position:center left;
background-repeat:no-repeat;
text-indent:-9999px;
margin:0;
padding:0;
}
.page-header{
border:0;
}
.navbar .nav li a{
border-radius:3px;
display:block;
white-space:nowrap;
padding:6px 11px 7px;
max-width:100px;
overflow:hidden;
text-overflow:ellipsis;
text-decoration:none;
}
.navbar .nav li ul{
border-radius:5px;
display:none;
position:absolute;
list-style-type:none;
min-width:100px;
padding:3px;
box-shadow:0 0 3px rgba(0,0,0,0.3);
}
.navbar .nav > li:hover ul{
display:block;
}
.marketing-byline {
list-style:none;
text-align:center;
}
.marketing-byline li{
display:inline;
padding:0 2px;
}
.download-info{
clear:both;
}
section{
margin-top:200px;
}
img{
height:auto !important;
}
iframe{
max-width:100% !important;
}
@media (max-width: 979px) {
#documenter_content{
padding-top: 0px;
}
.navbar .nav > li > a{
padding:6px 11px 7px;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
.navbar .nav li ul{
display:none;
box-shadow:none;
position:static;
}
.navbar .nav li:hover ul{
display:block;
}
.navbar .nav li ul li{
display:block;
}
.navbar .nav li a{
max-width:100%;
}
section{
margin-top:80px;
}
}
@media (max-width: 480px) {
section{
margin-top:30px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -0,0 +1,106 @@
## 2.0 BOOTSTRAP JS PHILOSOPHY
These are the high-level design rules which guide the development of Bootstrap's plugin apis.
---
### DATA-ATTRIBUTE API
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript.
We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
$('body').off('.data-api')
To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
$('body').off('.alert.data-api')
---
### PROGRAMATIC API
We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
All public APIs should be single, chainable methods, and return the collection acted upon.
$(".btn.danger").button("toggle").addClass("fat")
All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with now keyboard
$("#myModal").modal('show') // initializes and invokes show immediately afterqwe2
---
### OPTIONS
Options should be sparse and add universal value. We should pick the right defaults.
All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … }
An options definition should take the following form:
*noun*: *adjective* - describes or modifies a quality of an instance
examples:
backdrop: true
keyboard: false
placement: 'top'
---
### EVENTS
All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action.
show | shown
hide | hidden
---
### CONSTRUCTORS
Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
$.fn.popover.Constructor
---
### DATA ACCESSOR
Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this:
$('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
---
### DATA ATTRIBUTES
Data attributes should take the following form:
- data-{{verb}}={{plugin}} - defines main interaction
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
- data-{{noun}} - defines class instance options
examples:
// control other targets
data-toggle="modal" data-target="#foo"
data-toggle="collapse" data-target="#foo" data-parent="#bar"
// defined on element they control
data-spy="scroll"
data-dismiss="modal"
data-dismiss="alert"
data-toggle="dropdown"
data-toggle="button"
data-toggle="buttons-checkbox"
data-toggle="buttons-radio"

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,30 @@
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}

View File

@@ -0,0 +1,28 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();

View File

@@ -0,0 +1,205 @@
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/

View File

@@ -0,0 +1,11 @@
/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.co.at/2009/05/jqueryscrollto-142-released.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);

View File

@@ -0,0 +1,82 @@
/*!
* Documenter 2.0
* http://rxa.li/documenter
*
* Copyright 2011, Xaver Birsak
* http://revaxarts.com
*
*/
!function ($) {
$(function(){
var hash = location.hash || null,
win = $(window),
scrolloffset = $('div.navbar').height()+40,
iDeviceNotOS4 = (navigator.userAgent.match(/iphone|ipod|ipad/i) && !navigator.userAgent.match(/OS 5/i)) || false,
badIE = $('html').prop('class').match(/ie(6|7|8)/)|| false;
duration = parseInt(duration,10);
$('.dropdown-toggle').dropdown();
$('.navbar').scrollspy();
$(".collapse").collapse();
//handle external links (new window)
$('a[href^=http]').bind('click',function(){
window.open($(this).attr('href'));
return false;
});
//IE 8 and lower doesn't like the smooth pagescroll
if(!badIE){
window.scroll(0,0);
$('a[href^=#]').bind('click touchstart',function(){
hash = $(this).attr('href');
$.scrollTo.window().queue([]).stop();
goTo(hash, true);
return false;
});
//if a hash is set => go to it
if(hash){
setTimeout(function(){
goTo(hash);
},500);
}
}
$('.brand').on('click', function(){
goTo('#container', false);
});
//the function is called when the hash changes
function hashchange(){
goTo(location.hash, false);
}
//scroll to a section and set the hash
function goTo(hash,changehash){
win.unbind('hashchange', hashchange);
hash = hash.replace(/!\//,'');
win.stop().scrollTo(hash,duration,{
offset:-scrolloffset,
easing:easing,
axis:'y'
});
if(changehash !== false){
var l = location;
location.href = (l.protocol+'//'+l.host+l.pathname+'#!/'+hash.substr(1));
location.hash = hash.substr(1);
}
win.bind('hashchange', hashchange);
}
// make code pretty
window.prettyPrint && prettyPrint();
})
}(window.jQuery)

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,360 @@
/*!
* Documenter 1.6
* http://rxa.li/documenter
*
* Copyright 2011, Xaver Birsak
* http://revaxarts.com
*
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
html {
font-size:101%;
font-family:Arial,verdana,arial,sans-serif;
font-size:12px;
-webkit-text-size-adjust:none;
color:#6F6F6F;
background-color:#efefef;
}
body{
min-height:100%;
height:auto;
width:100%;
}
footer, header, section {
display:block;
}
a{ color:#6F6F6F; text-decoration:none; cursor:pointer; }
a:hover { text-decoration:underline }
p, ul, ol{
margin:18px 0;
line-height:1.5em;
}
li{
list-style:none;
}
li.placeholder{
height:70px;
width:100%;
font-size:16px;
}
hr {
display:block;
height:0px;
line-height:0px;
border:0;
border-top:1px solid #ddd;
border-bottom:1px solid #aaa;
margin:16px 0;
padding:0;
}
hr.notop{
margin-top:0;
}
strong{
font-weight:700;
}
#documenter_content{
position:absolute;
right:18px;
left:218px;
padding-left:10px;
padding-bottom:800px;
min-height:100%;
height:auto;
z-index:1;
}
#documenter_sidebar{
-moz-box-shadow:0 0 6px rgba(3,3,3,0.6);
-webkit-box-shadow:0 0 6px rgba(3,3,3,0.6);
box-shadow:0 0 6px rgba(3,3,3,0.6);
position:fixed;
left:0;
width:200px;
height:100%;
min-height:100%;
z-index:100;
}
#documenter_sidebar a{
position:relative;
z-index:100;
}
img{
border:0;
}
#documenter_copyright{
position:absolute;
bottom:10px;
font-size:10px;
right:15px;
width:200px;
text-align:right;
z-index:1
}
noscript{
display:block;
position:absolute;
top:238px;
margin:0 auto;
width:800px;
bottom:0;
z-index:20;
}
noscript p{
width:800px;
font-size:20px;
padding-top:20px;
margin:0 auto;
color:#4D4D4D;
}
.small{
font-size:10px;
letter-spacing:0;
}
/*----------------------------------------------------------------------*/
/* Sidebar
/*----------------------------------------------------------------------*/
#documenter_sidebar #documenter_logo{
display:block;
height:20%;
max-height:200px;
min-height:70px;
width:200px;
background-position:center center;
background-repeat:no-repeat;
}
#documenter_sidebar ol{
font-size:12px;
font-weight:700;
min-height:150px;
height:75%;
overflow:auto;
}
#documenter_sidebar ol li{
text-align:right;
padding:0;
}
#documenter_sidebar ol a{
display:block;
border-top:1px solid #ddd;
border-bottom:1px solid #aaa;
padding:6px 15px 7px 0;
text-align:right;
}
#documenter_sidebar ol a:hover,#documenter_sidebar ol a.current{
-webkit-text-shadow:none;
-moz-text-shadow:none;
text-shadow:none;
text-decoration:none;
}
#documenter_sidebar ol li ol{
border-top:0;
font-size:10px;
min-height:10px;
height:auto;
overflow:auto;
margin:0;
display:none;
}
#documenter_sidebar ol li ol li a{
display:block;
padding:4px 15px 5px 0;
text-align:right;
}
/*----------------------------------------------------------------------*/
/* Content
/*----------------------------------------------------------------------*/
#documenter_cover{
height:800px;
padding-top:200px !important;
}
#documenter_cover li{
list-style:none !important;
margin-left:0 !important;
}
#documenter_cover p{
width:500px;
}
#documenter_content section{
padding-top:70px;
}
#documenter_content h1{
font-size:30px;
font-weight:700;
}
#documenter_content h2{
font-size:20px;
margin-bottom:18px;
font-weight:100;
}
#documenter_content h3{
font-size:26px;
margin:18px 0 0;
font-weight:100;
}
#documenter_content h4{
font-size:20px;
margin:18px 0;
font-weight:100;
}
#documenter_content h5{
font-size:16px;
margin:18px 0;
font-weight:100;
}
#documenter_content h6{
font-size:14px;
margin:18px 0;
font-weight:100;
}
#documenter_content p{
margin:18px 0;
}
#documenter_content ol li{
list-style:decimal;
margin-left:36px;
}
#documenter_content ul li{
list-style:square;
margin-left:36px;
}
#documenter_content dl{
}
#documenter_content dl dt{
padding-top:12px;
font-weight:700;
font-size:14px;
}
#documenter_content dl dd{
padding-top:3px;
margin-left:18px;
}
#documenter_content table{
border-collapse:collapse;
}
#documenter_content table th{
font-weight:700;
}
#documenter_content table th, #documenter_content table td{
padding:3px;
text-align:left;
}
#documenter_content code, #documenter_content pre{
font-family:"Courier New", Courier, monospace;
font-size:12px;
}
#documenter_content .warning{
padding:10px 10px 10px 30px;
border:1px solid #D5D458;
background-color:#F0FEB1;
background-image:url(img/warning.png);
background-repeat:no-repeat;
background-position: 8px 11px;
}
#documenter_content .info{
padding:10px 10px 10px 30px;
border:1px solid #6AB3FF;
background-color:#A3D0FF;
background-image:url(img/info.png);
background-repeat:no-repeat;
background-position: 8px 11px;
}
#documenter_content pre{
background-image:url(img/pre_bg.png);
line-height:19px;
}
/*----------------------------------------------------------------------*/
/* Print Styles
/*----------------------------------------------------------------------*/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
hr { border-top:1px solid #000 !important;border-bottom:0 !important; }
#documenter_sidebar{
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
position:absolute;
left:10px;
top:0;
width:100%;
margin-top:500px;
}
#documenter_sidebar ol:before { content: "Table of Contents"; }
#documenter_sidebar ol{
border:0 !important;
}
#documenter_sidebar ol li{
border:0 !important;
text-align:left;
}
#documenter_sidebar ol li a{
border:0 !important;
text-align:left;
padding:4px;
}
#documenter_sidebar ol li a:hover{
border:0 !important;
}
#documenter_sidebar #documenter_logo{
display:none;
}
#documenter_sidebar #documenter_copyright{
display:none;
}
#documenter_content{
left:10px;
}
#documenter_cover{
margin-bottom:300px;
}
#documenter_content .warning{
background-image:url(img/warning.png) !important;
background-repeat:no-repeat !important;
background-position: 8px 11px !important;
}
#documenter_content .info{
background-image:url(img/info.png) !important;
background-repeat:no-repeat !important;
background-position: 8px 11px !important;
}
#documenter_content pre{
background-image:url(img/pre_bg.png) !important;
line-height:19px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 607 B

View File

@@ -0,0 +1,10 @@
/*
* Copyright (c) 2012
* -------------------------------
* powered by revaxarts.com (http://revaxarts.com)
* original filename: shDocumenter.css
* filesize: 3735 Bytes
* last modified: Tue, 05 Apr 2011 16:10:24 +0200
*
*/
.syntaxhighlighter { background-color: #FEFEFE !important; margin:9px 0 !important; } .syntaxhighlighter .line.alt1 { background-color: #F0F0F0 !important; } .syntaxhighlighter .line.alt2 { background-color: #FEFEFE !important; } .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { background-color: #c3defe !important; } .syntaxhighlighter .line.highlighted.number { color: #FEFEFE !important; } .syntaxhighlighter { overflow:auto !important; } .syntaxhighlighter table { min-width:900px !important; width:100% !important; } .syntaxhighlighter table caption { color: black !important; } .syntaxhighlighter .gutter { color: #787878 !important; width:3% !important; text-align:right; } .syntaxhighlighter .code { width:97% !important; } .syntaxhighlighter .code .line { overflow:hidden; height:18px !important; } .syntaxhighlighter .gutter .line { overflow:hidden; border-right: 3px solid #FEFEFE !important; height:18px !important; } .syntaxhighlighter .gutter .line.highlighted { background-color: #FEFEFE !important; color: #787878 !important; } .syntaxhighlighter.printing .line .content { border: none !important; } .syntaxhighlighter.collapsed { overflow: visible !important; } .syntaxhighlighter.collapsed .toolbar { color: #3f5fbf !important; background: #FEFEFE !important; border: 1px solid #d4d0c8 !important; } .syntaxhighlighter.collapsed .toolbar a { color: #3f5fbf !important; } .syntaxhighlighter.collapsed .toolbar a:hover { color: #aa7700 !important; } .syntaxhighlighter .toolbar { color: #a0a0a0 !important; background: #d4d0c8 !important; border: none !important; } .syntaxhighlighter .toolbar a { color: #a0a0a0 !important; } .syntaxhighlighter .toolbar a:hover { color: red !important; } .syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: black !important; } .syntaxhighlighter .comments, .syntaxhighlighter .comments a { color: #3f5fbf !important; } .syntaxhighlighter .string, .syntaxhighlighter .string a { color: #2a00ff !important; } .syntaxhighlighter .keyword { color: #7f0055 !important; } .syntaxhighlighter .preprocessor { color: #646464 !important; } .syntaxhighlighter .variable { color: #aa7700 !important; } .syntaxhighlighter .value { color: #009900 !important; } .syntaxhighlighter .functions { color: #ff1493 !important; } .syntaxhighlighter .constants { color: #0066cc !important; } .syntaxhighlighter .script { font-weight: bold !important; color: #7f0055 !important; background-color: none !important; } .syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: gray !important; } .syntaxhighlighter .color2, .syntaxhighlighter .color2 a { color: #ff1493 !important; } .syntaxhighlighter .color3, .syntaxhighlighter .color3 a { color: red !important; } .syntaxhighlighter .keyword { font-weight: bold !important; } .syntaxhighlighter .xml .keyword { color: #3f7f7f !important; font-weight: normal !important; } .syntaxhighlighter .xml .color1, .syntaxhighlighter .xml .color1 a { color: #7f007f !important; } .syntaxhighlighter .xml .string { font-style: italic !important; color: #2a00ff !important; }

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,205 @@
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/

View File

@@ -0,0 +1,11 @@
/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);

View File

@@ -0,0 +1,159 @@
/*!
* Documenter 1.6
* http://rxa.li/documenter
*
* Copyright 2011, Xaver Birsak
* http://revaxarts.com
*
*/
//if Cufon replace headings
if(typeof Cufon == 'function') Cufon.replace('h1, h2, h3, h4, h5, h6');
$(document).ready(function() {
var timeout,
sections = new Array(),
sectionscount = 0,
win = $(window),
sidebar = $('#documenter_sidebar'),
nav = $('#documenter_nav'),
logo = $('#documenter_logo'),
navanchors = nav.find('a'),
timeoffset = 50,
hash = location.hash || null;
iDeviceNotOS4 = (navigator.userAgent.match(/iphone|ipod|ipad/i) && !navigator.userAgent.match(/OS 5/i)) || false,
badIE = $('html').prop('class').match(/ie(6|7|8)/)|| false;
//handle external links (new window)
$('a[href^=http]').bind('click',function(){
window.open($(this).attr('href'));
return false;
});
//IE 8 and lower doesn't like the smooth pagescroll
if(!badIE){
window.scroll(0,0);
$('a[href^=#]').bind('click touchstart',function(){
hash = $(this).attr('href');
$.scrollTo.window().queue([]).stop();
goTo(hash);
return false;
});
//if a hash is set => go to it
if(hash){
setTimeout(function(){
goTo(hash);
},500);
}
}
//We need the position of each section until the full page with all images is loaded
win.bind('load',function(){
var sectionselector = 'section';
//Documentation has subcategories
if(nav.find('ol').length){
sectionselector = 'section, h4';
}
//saving some information
$(sectionselector).each(function(i,e){
var _this = $(this);
var p = {
id: this.id,
pos: _this.offset().top
};
sections.push(p);
});
//iPhone, iPod and iPad don't trigger the scroll event
if(iDeviceNotOS4){
nav.find('a').bind('click',function(){
setTimeout(function(){
win.trigger('scroll');
},duration);
});
//scroll to top
window.scroll(0,0);
}
//how many sections
sectionscount = sections.length;
//bind the handler to the scroll event
win.bind('scroll',function(event){
clearInterval(timeout);
//should occur with a delay
timeout = setTimeout(function(){
//get the position from the very top in all browsers
pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//iDeviceNotOS4s don't know the fixed property so we fake it
if(iDeviceNotOS4){
sidebar.css({height:document.height});
logo.css({'margin-top':pos});
}
//activate Nav element at the current position
activateNav(pos);
},timeoffset);
}).trigger('scroll');
});
//the function is called when the hash changes
function hashchange(){
goTo(location.hash, false);
}
//scroll to a section and set the hash
function goTo(hash,changehash){
win.unbind('hashchange', hashchange);
hash = hash.replace(/!\//,'');
win.stop().scrollTo(hash,duration,{
easing:easing,
axis:'y'
});
if(changehash !== false){
var l = location;
location.href = (l.protocol+'//'+l.host+l.pathname+'#!/'+hash.substr(1));
}
win.bind('hashchange', hashchange);
}
//activate current nav element
function activateNav(pos){
var offset = 100,
current, next, parent, isSub, hasSub;
win.unbind('hashchange', hashchange);
for(var i=sectionscount;i>0;i--){
if(sections[i-1].pos <= pos+offset){
navanchors.removeClass('current');
current = navanchors.eq(i-1);
current.addClass('current');
parent = current.parent().parent();
next = current.next();
hasSub = next.is('ol');
isSub = !parent.is('#documenter_nav');
nav.find('ol:visible').not(parent).slideUp('fast');
if(isSub){
parent.prev().addClass('current');
parent.stop().slideDown('fast');
}else if(hasSub){
next.stop().slideDown('fast');
}
win.bind('hashchange', hashchange);
break;
};
}
}
});

View File

@@ -0,0 +1,91 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
function getKeywordsCSS(str)
{
return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
};
function getValuesCSS(str)
{
return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
};
var keywords = 'ascent azimuth background-attachment background-color background-image background-position ' +
'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index';
var values = 'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero default digits disc dotted double '+
'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
var fonts = '[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
this.regexList = [
{ regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings
{ regex: /\#[a-fA-F0-9]{3,6}/g, css: 'value' }, // html colors
{ regex: /(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)/g, css: 'value' }, // sizes
{ regex: /!important/g, css: 'color3' }, // !important
{ regex: new RegExp(getKeywordsCSS(keywords), 'gm'), css: 'keyword' }, // keywords
{ regex: new RegExp(getValuesCSS(values), 'g'), css: 'value' }, // values
{ regex: new RegExp(this.getKeywords(fonts), 'g'), css: 'color1' } // fonts
];
this.forHtmlScript({
left: /(&lt;|<)\s*style.*?(&gt;|>)/gi,
right: /(&lt;|<)\/\s*style\s*(&gt;|>)/gi
});
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['css'];
SyntaxHighlighter.brushes.CSS = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

View File

@@ -0,0 +1,52 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
var keywords = 'break case catch continue ' +
'default delete do else false ' +
'for function if in instanceof ' +
'new null return super switch ' +
'this throw true try typeof var while with'
;
var r = SyntaxHighlighter.regexLib;
this.regexList = [
{ regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
{ regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
{ regex: r.singleLineCComments, css: 'comments' }, // one line comments
{ regex: r.multiLineCComments, css: 'comments' }, // multiline comments
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.forHtmlScript(r.scriptScriptTags);
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['js', 'jscript', 'javascript'];
SyntaxHighlighter.brushes.JScript = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

View File

@@ -0,0 +1,69 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
function process(match, regexInfo)
{
var constructor = SyntaxHighlighter.Match,
code = match[0],
tag = new XRegExp('(&lt;|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
result = []
;
if (match.attributes != null)
{
var attributes,
regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
'\\s*=\\s*' +
'(?<value> ".*?"|\'.*?\'|\\w+)',
'xg');
while ((attributes = regex.exec(code)) != null)
{
result.push(new constructor(attributes.name, match.index + attributes.index, 'color1'));
result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string'));
}
}
if (tag != null)
result.push(
new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword')
);
return result;
}
this.regexList = [
{ regex: new XRegExp('(\\&lt;|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\&gt;|>)', 'gm'), css: 'color2' }, // <![ ... [ ... ]]>
{ regex: SyntaxHighlighter.regexLib.xmlComments, css: 'comments' }, // <!-- ... -->
{ regex: new XRegExp('(&lt;|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(&gt;|>)', 'sg'), func: process }
];
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['xml', 'xhtml', 'xslt', 'html'];
SyntaxHighlighter.brushes.Xml = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 951 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 B

View File

@@ -0,0 +1,853 @@
/*-----------------------------------------------------------------------------
KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
Screen Stylesheet
version: 1.0
date: 07/27/11
author: themepunch
email: support@themepunch.com
website: http://www.themepunch.com
-----------------------------------------------------------------------------*/
/**********************
- RESET -
************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
* {
/* -moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
*/
}
.toolpad * {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
/***********************
- BASICS -
***********************/
body { font-family: 'Open Sans', sans-serif; color:#888; font-weight:400;}
p { font-size:13px; font-weight: 400; line-height:22px;}
h2 { color:#000; font-size:17px; font-weight:700; margin-bottom:20px;}
h2.redtitle { padding:9px 20px; width:100%; background:#e33a0c; color:#fff; box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
margin-bottom:40px;
}
h2.nobottommargin { margin-bottom:0px;}
.container { max-width:1170px;margin:auto; }
.clear { clear:both;}
.float-left { float:left;}
.float-right { float:right;}
.divide40 { width:100%; height:40px;}
.mb30 { margin-bottom:30px;}
.mlb30 { margin-left:30px; margin-bottom:30px;}
.mrb30 { margin-right:30px; margin-bottom:30px;}
.table { display:table; padding-bottom:35px;}
.table.nbp { padding-bottom:0px;}
.table-cell { display: table-cell; vertical-align: top; }
.table-cell img{ width: 220px; }
.lp30 { padding-left:30px;}
.rp30 { padding-right:30px;}
hr { border:none; border-top:2px solid #eee; margin:0px 0px 40px;}
.boxed-content hr { border:none; border-top:2px solid #eee; margin:0px -40px 40px;}
hr.nohormargin { margin: -1px -1px 40px 0px}
.one_third { width:32%; margin-right:1%; float:left;}
.one_third.last{ margin-right:0;}
a,a:visited { color:#e33a0c}
a:hover { text-decoration: none;}
/******************************
- HEADER -
********************************/
header { width:100%; padding:40px 30px 37px 30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.content { width:100%; padding:0px 30px 0px 30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.logo-container { float:left; width:50%;}
.logo { background:url(assets/logo.png); background-size:100%; background-position: center center; background-repeat:no-repeat;max-width:406px; height:60px; }
.buy-and-socials { float:right; width:50%;}
.button-holder { margin-bottom:10px;}
.button,
.button:hover,
.button:visited { float:right;background-color:#e33a0c; color:#fff; text-decoration: none; font-weight:300; font-size:14px; padding:8px 15px; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
/******************************
- MENU -
********************************/
menu { border-top:2px solid #eee;border-bottom:2px solid #eee; padding:0px 0px 13px; margin-bottom:8px;}
.menubutton,
.menubutton:visited,
.menubutton:hover { margin-top:13px;text-decoration: none; line-height:30px; color:#000; font-weight:800; font-size:14px; float:left; margin-right:20px; padding-right:20px; border-right:2px solid #eee;}
.submenu .menubutton,
.submenu .menubutton:visited,
.submenu .menubutton:hover { margin-top:0px;text-decoration: none; line-height:30px; color:#aaa; font-weight:700; font-size:14px; float:left; margin-right:40px;padding-right:0px; border:none; }
.submenu i { font-size:20px; font-weight: 300; margin-right:10px;}
.menubutton.noborder,
.menubutton.noborder:hover,
.menubutton.noborder:visited { border-right:none !important; padding-right:0px; margin-right:0px;}
.icon-responsive { width:35px; height:28px; background:url(assets/icon-responsive.jpg) no-repeat center top 100%; float:left;margin-right:10px;}
.icon-fullscreen { width:35px; height:28px; background:url(assets/icon-fullscreen.jpg) no-repeat center top 100%; float:left;margin-right:10px;}
.icon-fullwidth { width:35px; height:28px; background:url(assets/icon-fullwidth.jpg) no-repeat center top 100%; float:left;margin-right:10px;}
.redcircle { background-color:#e33a0c; font-size:12px; padding:1px 7px; margin-right:10px; color:#fff; font-weight:400; border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}
.menubutton:hover,
.menubutton:active { color:#e33a0c !important}
.submenu .menubutton:hover,
.submenu .menubutton:active { color:#000 !important;}
/******************************
- TOOLPAD -
********************************/
.toolpad { padding:20px 30px; border:2px solid #eee; border-radius:0px 0px 5px 5px; -moz-border-radius:0px 0px 5px 5px;-webkit-border-radius:0px 0px 5px 5px; border-top:none; position: relative}
.tool { float:left;width:33.3%;margin-right:0%;display:table; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
padding-left:20px;}
.tool.first { padding-left:0px; position: relative;}
.tooltext { font-size:13px; font-weight:700; color:#777; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
background-color:#f5f5f5; border:1px solid #eee; padding:10px 15px;float:left;
box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
display:table-cell;width:100%;
}
.tooltext.long { }
.tooltext.norightcorner { border-radius:5px 0px 0px 5px;-moz-border-radius:5px 0px 0px 5px;-webkit-border-radius:5px 0px 0px 5px;}
.toolcontrols { display:table-cell; width:95px; vertical-align: top;}
.toolcontrols.short { width:40px;}
.toolcontroll { width:40px; height:40px; background:#eee; float:left; color:#cccccc; line-height:40px; text-align: center; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
cursor:pointer;
}
.toolcontroll.noleftcorner { border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;}
.toolcontroll.withspace { margin-left:10px;}
.toolcontroll.withspace2 { margin-left:5px;}
.centertop,.centerbottom { line-height:1px; height:10px; }
.centertop { margin-top:7px;}
.tryme { background:url(assets/tryme.png); background-size:100%; width:83px; height:25px; position:absolute; right:-89px; top:50%; margin-top:-12px; margin-left:-20px;}
.tool:hover .tooltext { color:#fff; background-color:#e33a0c; border-color:#e33a0c;}
.tool:hover .toolcontroll { color:#fff; background:#aa2b09}
/******************************
- TRANSITION SELECTBOX -
********************************/
.transition-selectbox-holder { display:none;width:320px; height:400px; background:#fff; border:7px solid #ccc; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; position:absolute; top:-410px; left:0px;z-index:1000;padding:20px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; margin-bottom:0px;}
.transition-selectbox { overflow:hidden;width:280px; height:360px; background:#fff; position:absolute; top:20px; left:20px;z-index:1000;}
.transition-selectbox-holder:after { width: 0;height: 0; content:" ";border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #ccc; bottom:-17px; left:50%; position: absolute;}
.transition-selectbox ul,
.transition-selectbox ul li { list-style: none; }
.transition-selectbox ul { margin-bottom:14px;}
.transition-selectbox ul li { cursor:pointer; font-size:13px; line-height:16px; padding:7px 10px; background-color:#eee; color:#888;font-weight:400; margin:0px 0px 2px 0px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;;}
.transition-selectbox ul li:hover { background-color:#666; color:#fff;}
.transition-selectbox ul li:first-child,
.transition-selectbox ul li:first-child:hover { cursor:default; font-size:14px; color:#888; font-weight:800; text-transform: uppercase;margin-bottom:14px;padding:0;background:transparent;}
/******************************
- FURTHER CONTENT -
********************************/
.boxed-content { background-color:#f5f5f5; padding:40px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding-bottom:36px;
}
.flist { font-size:13px;color:#000;}
.flist ul, .flist li { list-style: none;}
.flist ul { margin-bottom:35px;}
.flist ul li { margin-bottom:12px; position: relative; padding-left:30px;}
.flist ul li:before { content:" ";width:14px;height:14px; position:absolute; left:0px; top:2px;background:url(assets/check.png) center bottom;}
.flist ul li:first-child:before { content:""; background:none;}
.flist ul li:first-child { font-weight:700;}
.flist ul li.new { color:#e33a0c;}
.newspan { font-size:12px;color:#fff; background:#e33a0c; padding:0px 5px;margin-left:10px;}
.sharings { height:21px; position:relative; overflow:visible;}
/******************************
- BANNERCONTAINER -
********************************/
.spectaculus { max-width:1230px; padding:0px 30px; margin:auto; position: relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.spectaculus2 { width:100%;padding:0; margin:auto; position: relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.bannercontainer { position:relative;max-height:500px;}
/***************************************
- TABLE OF COMPATIBILITY -
****************************************/
table.features { width:100%; border-spacing:0px;}
table.features tr { font-size:13px;line-height:16px !important; color:#000; font-weight:900; font-family: 'Open Sans', sans-serif;
height:50px;
}
table.features td { vertical-align:middle;border-bottom:2px solid #eee;}
table.features span { font-size:13px;line-height:16px !important; color:#888; font-weight:500;}
table.features tr.titles { color:#888; font-size:13px; font-weight:400; text-align:center;}
.yo { background:url(assets/check.png) no-repeat; width:14px;height:13px; margin:auto;}
.nop { background:url(assets/no.png) no-repeat; width:12px;height:14px; margin:auto;}
@media only screen and (min-width: 0px) and (max-width: 479px) {
table.features tr,
table.features tr span { font-size:10px; line-height:12px;}
table.features tr span { display:none}
}
/******************************
- SCROLLPANE -
********************************/
/***********************************
- JS SCROLLPANE CLASSES -
************************************/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0px;
width: 8px;
height: 100%;
background: #eee !important;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0.0;
-khtml-opacity: 0.0;
opacity: 0.0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
z-index:1020;
}
.transition-selectbox:hover .jspVerticalBar{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 15px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: none !important;
position: relative;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.jspDrag
{
background: #777;
position: relative;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
position: relative;
top: 0;
left: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 90%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 4px;
}
.jspHorizontalBar .jspArrow
{
width: 8px;
float: left;
height: 90%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 90%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
/******************************
- MEDIAQUERIES -
********************************/
@media only screen and (min-width: 980px) and (max-width: 1199px) {
}
@media only screen and (max-width: 1300px) {
.tryme { display:none;}
}
@media only screen and (max-width: 940px) {
.logo-container,
.buy-and-socials { width:100%; float:none; text-align: center;}
.logo { width:100%; margin:auto;}
.button,.button:hover,
.button:visited { float:none;}
.button-holder { margin-bottom:25px;}
.socials,
.license-getstarted { display:none;}
.menu-inner { margin:auto; width:550px;}
.submenu-inner { margin:auto; width:455px;}
header { padding:30px 20px 30px 20px}
.spectaculus,
.content { padding:0px 20px;}
}
@media only screen and (max-width: 750px) {
.toolpad { display:none;}
.one_third { width:48%; margin-right:2%; margin-bottom:0px;}
.one_third.last { clear:both;float:none; width:100%;}
}
@media only screen and (max-width: 650px) {
.menu-inner { margin:auto; width:220px;}
.submenu-inner { margin:auto; width:172px;}
.table-cell img { display:none;}
.table-cell { display:block;}
.table-cell.lp30,
.table-cell.rp30 { padding-left:0; padding-right:0}
.hidemeonmobile ,
.toolpad { display:none;}
}
@media only screen and (max-width: 600px) {
.one_third { width:100%; margin-right:0; margin-bottom:0px;}
}
@media only screen and (max-width: 495px) {
.submenu-inner { margin:auto; width:118px;}
.submenu .menubutton,
.submenu .menubutton:visited,
.submenu .menubutton:hover { font-size:12px; margin-right:20px; }
.submenu i { font-size:15px;}
.menubutton.noborder { margin-right:0px; }
}
/******************************
- CAPTION EDITOR -
********************************/
/******************************
- CSS Editor Styles -
********************************/
#css_editor_wrap,
#layeranimeditor_wrap, {
display: none;
}
#css_editor_wrap table,
#layeranimeditor_wrap table {
width: 616px;
}
#css_editor_expert {
display: none;
}
.opt_title{
font-size: 14px;
font-weight: 500;
margin-bottom: 20px;
}
.divide8{
height: 8px;
width: 100%;
}
.button-css-novice{
background: none repeat scroll 0 0 #00B6EA !important;
border: 1px solid #0084AA !important;
color: #FFFFFF !important;
text-shadow: none !important;
font-size: 12px;
margin-bottom: 10px !important;
margin-left: 4px !important;
}
#dialog_edit_css hr {
border-color: #DFDFDF;
border-image: none;
border-right: medium none;
border-style: solid none none;
border-width: 1px medium medium;
margin: 0;
padding: 0;
}
#dialog_edit_css table {
width: 100%;
}
#font-size-slider, #font-weight-slider, #border-width-slider {
width: 220px;
}
#font-size-slider .ui-slider-handle, #font-weight-slider .ui-slider-handle,
#border-width-slider .ui-slider-handle,
#line-height-slider .ui-slider-handle,
#background-transparency-slider .ui-slider-handle, .subslider .ui-slider-handle,
.rotationsliders .ui-slider-handle, .subslider_rotation .ui-slider-handle
{
font-size: 8px ;
line-height: 10px;
padding: 2px 0;
text-align: center;
text-decoration: none;
width: 27px;
top:-7px;
cursor: pointer;
}
#layeranimeditor_wrap .rotationsliders { width:150px;margin-bottom:10px;}
#layeranimeditor_wrap .rotationsliders .ui-slider-handle.ui-state-default.ui-corner-all { border:1px solid #d5d5d5;}
#layeranimeditor_wrap .tpshortinput { width:50px; margin-right:10px; float:left; margin-top:0px;}
.pad-input, .corn-input {
width: 35px;
}
#dialog_edit_css span, #dialog_edit_css input {
float: left;
}
input[name="css_font-size"], input[name="css_font-weight"]{
width: 50px;
}
#font_family {
float: left;
}
#css_preview {
}
.tp-present-wrapper-parent .tp-present-wrapper {
text-align: center;
width: 640px;
margin: 0px 0px 10px;
}
#layeranimeditor_wrap .tp-present-wrapper { padding: 0px !important; margin:0px; height:300px; width:100%;}
#layeranimeditor_wrap table { width:100%; padding:0px; background:#f1f1f1; font-size:12px;color: #222; }
#layeranimeditor_wrap table tr { padding:10px 0px}
#layeranimeditor_wrap .graybasicbg { background:#e9e9e9}
#layeranimeditor_wrap .css-edit-title { color:#2980b9 !important}
#css-editor-accordion
{
border-color: #DFDFDF !important;
-webkit-box-shadow: inset 0 1px 0 #FFF;
box-shadow: inset 0 1px 0 #FFF;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: sans-serif;
font-size: 12px;
color:#333;
}
#css-editor-accordion h3,
#css_static_editor_wrap
{
text-shadow: #FFF 0 1px 0;
color:#000;
font-family: sans-serif;
font-size:14px;
}
#css-editor-accordion .ui-accordion-header { margin-top:0px;}
#css-editor-accordion .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom.ui-accordion-content-active,
#css_static_editor_wrap .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom.ui-accordion-content-active
{
background: url(../images/grain.png) repeat #F1F1F1;
-webkit-border-radius: 0px 0px 3px 3px !important;
border-radius: 0px 0px 3px 3px !important;
border:1px solid #dfdfdf;
padding:10px 15px 30px;
}
#css_editor_wrap .ui-state-active,
#css-static-accordion .ui-state-active,
#css-static-accordion .ui-widget-content .ui-state-active,
#css-static-accordion .ui-widget-header .ui-state-active,
#css_editor_wrap .ui-widget-content .ui-state-active,
#css_editor_wrap .ui-widget-header .ui-state-active,
#css_static_editor_wrap .ui-widget-header .ui-state-active,
#css-static-accordion .ui-widget-header .ui-state-active,
#layeranimeditor_wrap .ui-state-active,
#layeranimeditor_wrap .ui-widget-content .ui-state-active,
#layeranimeditor_wrap .ui-widget-header .ui-state-active {
-webkit-border-radius: 3px 3px 0px 0px !important;
border-radius: 3px 3px 0px 0px !important;
border:1px solid #dfdfdf;
border-bottom: 1px solid #DFDFDF;
text-shadow: #FFF 0 1px 0;
-webkit-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;
background: #F1F1F1;
background-image: -webkit-gradient(linear,left bottom,left top,from(#ECECEC),to(#F9F9F9));
background-image: -webkit-linear-gradient(bottom,#ECECEC,#F9F9F9);
background-image: -moz-linear-gradient(bottom,#ececec,#f9f9f9);
background-image: -o-linear-gradient(bottom,#ececec,#f9f9f9);
background-image: linear-gradient(to top,#ECECEC,#F9F9F9);
}
responsitive_row.disabled { display:none;}
#auto_height_row.disabled { display:none;}
#force_full_width_row.disabled { display:none;}
#full_screen_align_force_row.disabled { display:none;}
#slider_size_row table,
#slider_size_row td,
#slider_size_row th,
#slider_size_row tr,
#responsitive_row table,
#responsitive_row td,
#responsitive_row th,
#responsitive_row tr { padding:0 !important; margin:0 !important; vertical-align: middle !important}
#responsitive_row th { vertical-align: top !important; padding-top: 16px !important;padding-left:10px !important;}
#responsitive_row tr:first-child td { padding-top:10px !important}
#responsitive_row td td { padding-left:10px !important; padding-bottom:15px !important }
#slider_size_row th { padding-left:10px !important;}
#slider_size_row td td { padding-left:10px !important;}
.tpcsseditor, .tpdialogs { z-index:1000 ; position: fixed;}
.tpdialogs .ui-button-icon-primary.ui-icon.ui-icon-closethick,
.tpcsseditor .ui-button-icon-primary.ui-icon.ui-icon-closethick {
display: block;
margin: 1px;
left: 0px !important;
top: 0px !important;
}
.tp-present-wrapper-parent { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important;
-moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
opacity: 1 !important;
position: relative;
}
.tp-present-wrapper-parent .tipsy-arrow { display:none; }
.tp-present-caption { display: inline-block}
.tp-present-caption .tp-caption { position: relative !important}
.tp-present-wrapper { max-width:none !important; background:url(assets/trans_tile.png) repeat !important; display:inline-block !important;border:1px solid #d5d5d5 !important; border-radius: 0 !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; padding:15px 10px !important }
.tp-present-wrapper-parent-small { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important;
-moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
opacity: 1 !important;
position:absolute;
}
.tp-present-wrapper-parent-small .tipsy-arrow { display:none; }
.tp-present-caption-small { display: inline-block}
.tp-present-caption-small .tp-caption { position: relative !important}
.tp-present-wrapper-small { max-width:none !important; background:url(assets/trans_tile.png) repeat !important; display:inline-block !important;border:1px solid #d5d5d5 !important; border-radius: 0 !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; padding:15px 10px !important }
#sortlist li { background:#f1f1f1 !important}
/******************************
- SLIDE PARAMS -
********************************/
#slide_params_holder * { outline: none}
#slide_params_holder .form-table th { width:170px;}
#slide_params_holder .form-table tr { vertical-align: middle;}
#slide_params_holder .form-table input,
#slide_params_holder .form-table select,
#slide_params_holder .ui-dropdownchecklist-text,
#slide_params_holder .ui-dropdownchecklist-selector.ui-state-default { width:220px !important;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#slide_params_holder .form-table input[type="checkbox"],
#slide_params_holder .form-table input[type="radio"] { width:20px !important}
#slide_params_holder .form-table td { margin:0px;padding:0px; height:35px; }
#slide_params_holder .form-table td:nth-child(2) { width:250px !important}
#ddcl-slide_transition-ddw,
#ddcl-slide_transition_premium-ddw { height:300px !important; overflow-y: scroll; overflow-x:hidden;border:1px solid #d5d5d5; margin-top:-10px;}
#ddcl-slide_transition-ddw .ui-dropdownchecklist-dropcontainer.ui-widget-content,
#ddcl-slide_transition_premium-ddw .ui-dropdownchecklist-dropcontainer.ui-widget-content { overflow:hidden;}
#slide_params_holder .ui-state-default,
.ui-widget-content .ui-state-default { background: #f1f1f1;border:none}
#slide_params_holder .ui-state-default,
.ui-widget-content .ui-state-default { background: #f1f1f1;border:none}
#slide_params_holder .ui-dropdownchecklist-item.ui-state-default:nth-child(2n) { background:#f5f5f5}
#slide_params_holder .ui-widget-content { background:none; border:none;}
#slide_params_holder .ui-dropdownchecklist-text { line-height:20px; margin:0; padding:0px 5px}
#slide_params_holder .ui-dropdownchecklist-item { line-height:25px; padding:5px; vertical-align: middle}
#slide_params_holder span.ui-dropdownchecklist-selector.ui-state-default { border:1px solid #ddd; height:30px;}
#slide_params_holder span.ui-dropdownchecklist-selector.ui-state-default.ui-state-active { background:#3498db; color:#fff;}
#slide_params_holder span.ui-dropdownchecklist-text { line-height: 30px;}
.dropdowntitleoption { background:#f1c40f !important; color:#000; font-weight: bold}
.dropdowntitleoption input { display: none;}
/******************************
- PREVIEW TRANSITION -
********************************/
#preview_caption_transition { position: relative}
.preview_caption_wrapper { overflow:hidden;width:100%; height:200px; background:url(assets/trans_tile.png) repeat !important; position: relative}
#preview_caption_animateme,
#caption_custon_anim_preview { background:#3498db; padding:10px; font-size:15px; font-weight:400;font-family: sans-serif; color:#fff; position: absolute; top:82px; left:198px}
#caption_custon_anim_preview { top:78px; left:312px;}
#preview_looper { position:absolute; bottom:5px; right:5px; background:#fff; padding:2px; color:#2c3e50; font-size:14px;}
#preview_looper.deactivated { color:#e74c3c}
#preview_looper .replyinfo { font-size:12px;}
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close.revgray.button-primary.rev-uibuttons { background-color:#f1f1f1 !important}
#auto_height_row .radio_inner_wrapper { float:left; margin-right:15px;}
#force_full_width_row .radio_inner_wrapper { float:left;margin-right:15px;}
#full_screen_align_force_row .radio_inner_wrapper,
#full_screen_force_full_width_wrapper .radio_inner_wrapper { float:left;margin-right:15px;}
#divLayers .slide_layer { -webkit-font-smoothing: antialiased !important;}
.tp-present-wrapper-parent { overflow: hidden; position: relative;}
.caption-demo-controll { background:#333; width:100%;height:42px;line-height:30px; padding:5px 10px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.caption-speed-controll { width:100px; float:left}
.caption-easing-controll { width:250px; float:left}
.caption-inout-controll { cursor: pointer;-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
#caption-inout-controll .revicon-logout,
#caption-inout-controll .revicon-login {
color:#d8d8d8;
}
#caption-inout-controll .reviconinaction { color:#e74c3c}
.postbox tr:nth-child(1) td { padding-top:10px;padding-bottom:5px;}
.postbox tr:nth-child(2) td { padding-bottom:10px;}
.postbox td:nth-child(1) { min-width:25px; }
.postbox td:nth-child(2) { width:12%; }
.postbox td:nth-child(3) { min-width:25px; }
.postbox td:nth-child(4) { width:12%; }
.postbox td:nth-child(5) { min-width:25px; }
.postbox td:nth-child(6) { width:12%; }
.postbox td:nth-child(7) { min-width:25px; }
.postbox td:nth-child(8) { width:12%; }
.postbox td:nth-child(9) { width:100%;}
.lasttable td:nth-child(1) { width:6%; }
.lasttable td:nth-child(2) { width:10%; }
.lasttable td:nth-child(3) { width:6%; }
.lasttable td:nth-child(4) { width:10%; }
.lasttable td:nth-child(5) { width:4%; }
.lasttable td:nth-child(6) { width:10%; }
.lasttable td:nth-child(7) { width:4%; }
.lasttable td:nth-child(8) { width:10%; }
.lasttable td:nth-child(9) { width:40%;}
.postbox td:first-child { padding-left:20px}
pre { font-size:12px; font-family: 'Open Sans', sans-serif; color:#888; line-height:16px; background:url(assets/prebg.png) repeat; margin-top:-40px;margin-left:-40px;margin-right:-40px;padding:16px; padding-bottom:15px;}
pre .linedark { background:#888}
pre span { font-weight:700}

View File

@@ -0,0 +1,734 @@
/*!
* jScrollPane - v2.0.14 - 2013-05-01
* http://jscrollpane.kelvinluck.com/
*
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT or GPL licenses.
*/
(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],:not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:3,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.1.3
*
* Requires: 1.2.2+
*/
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;
if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event,
args = [].slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
// New school wheel delta (wheel event)
if ( orgEvent.deltaY ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( orgEvent.deltaX ) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
// Look for lowest delta to normalize the delta values
absDelta = Math.abs(delta);
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
// Get a whole value for the deltas
fn = delta > 0 ? 'floor' : 'ceil';
delta = Math[fn](delta / lowestDelta);
deltaX = Math[fn](deltaX / lowestDeltaXY);
deltaY = Math[fn](deltaY / lowestDeltaXY);
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
}));
/******************************
- THE PREVIEW JS FUNCTIONS -
********************************/
jQuery(document).ready(function() {
/******************************
- SUB MENU SCROLLER -
********************************/
jQuery('a.menubutton').each(function() {
var but = jQuery(this);
but.click(function() {
var but = jQuery(this);
var sto = but.data('where');
if (sto && sto!=undefined && jQuery(sto)) {
var pos = jQuery(sto).offset().top - 40;
jQuery('body, html').animate({scrollTop:pos},{queue:false,duration:400});
return false;
}
});
})
// HIDE JS IF WE ARE ON MOBILE
if (!is_mobile()) {
jQuery('.transition-selectbox').jScrollPane({});
var naviapi = jQuery('.transition-selectbox').data('jsp');
} else {
jQuery('.transition-selectbox').css({'overflow':'scroll'});
}
// THE TRANSITION SELECTOR
jQuery('#transitselector').click(function() {
var ts = jQuery('.transition-selectbox-holder');
if (!ts.hasClass("opened")) {
TweenLite.fromTo(ts,0.2,{opacity:0,transformOrigin:"center bottom", transformPerspective:400, y:-50,rotationX:0,z:0},{opacity:1,y:0,rotationX:0,ease:Power3.easeOut})
ts.css({display:'block'});
setTimeout(function() {
naviapi.reinitialise();
},100)
ts.addClass("opened");
}
})
jQuery('body').on('mouseleave','.transition-selectbox-holder.opened',function() {
var ts = jQuery('.transition-selectbox-holder');
TweenLite.to(ts,0.2,{opacity:0,transformOrigin:"center bottom", transformPerspective:400, y:-50,rotationX:0,z:0,ease:Power3.easeOut});
ts.removeClass("opened");
});
jQuery('.transition-selectbox li').each(function() {
var li = jQuery(this);
li.click(function() {
var li = jQuery(this);
var anim = li.data('anim');
jQuery('#mranim').text(li.text());
jQuery('#mranim').data('val',anim);
callChanger();
})
})
/******************************
- TIMER CHANGER -
********************************/
jQuery('#dectime').click(function() {
var mrtime = jQuery('#mrtime');
var curtime = mrtime.data('val');
curtime=curtime-100;
if (curtime<300) curtime=300;
mrtime.data('val',curtime);
mrtime.text('Time: '+curtime/1000+"s");
callChanger();
})
jQuery('#inctime').click(function() {
var mrtime = jQuery('#mrtime');
var curtime = mrtime.data('val');
curtime=curtime+100;
mrtime.data('val',curtime);
mrtime.text('Time: '+curtime/1000+"s");
callChanger();
})
/******************************
- SLOT CHANGER -
********************************/
jQuery('#decslot').click(function() {
var mrslot = jQuery('#mrslot');
var slot = mrslot.data('val');
slot=slot-1;
if (slot<1) slot=1;
mrslot.data('val',slot);
mrslot.text('Slots: '+slot);
callChanger();
})
jQuery('#incslot').click(function() {
var mrslot = jQuery('#mrslot');
var slot = mrslot.data('val');
slot=slot+1;
if (slot>20) slot=20;
mrslot.data('val',slot);
mrslot.text('Slots: '+slot);
callChanger();
})
var timeoutv;
function callChanger() {
clearTimeout(timeoutv);
timeoutv = setTimeout(function() {
var anim = jQuery('#mranim').data('val');
var timer = jQuery('#mrtime').data('val');
var slot = jQuery('#mrslot').data('val');
jQuery('.spectaculus ul li').each(function() {
jQuery(this).data("transition",anim);
jQuery(this).data("slotamount",slot);
jQuery(this).data("masterspeed",timer);
})
jQuery('#resultanim').text(anim);
jQuery('#resultslot').text(slot);
jQuery('#resultspeed').text(timer);
revapi.revnext();
},300);
}
/***************************************
- START THE ANIMATION CREATOR -
***************************************/
prepareAnimateCreator();
jQuery('#set-random-animation').click(function(){
jQuery('input[name="movex"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="movey"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="movez"]').val((Math.floor(Math.random() * 11) - 5) * 10);
jQuery('input[name="rotationx"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="rotationy"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="rotationz"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="scalex"]').val((Math.floor(Math.random() * 31)) * 10);
jQuery('input[name="scaley"]').val((Math.floor(Math.random() * 31)) * 10);
jQuery('input[name="skewx"]').val(Math.floor(Math.random() * 61));
jQuery('input[name="skewy"]').val(Math.floor(Math.random() * 61));
jQuery('input[name="captionopacity"]').val(0);
jQuery('input[name="captionperspective"]').val(600);
jQuery('input[name="originx"]').val((Math.floor(Math.random() * 41) - 20) * 10);
jQuery('input[name="originy"]').val((Math.floor(Math.random() * 41) - 20) * 10);
jQuery('input[name="captionspeed"]').val((Math.floor(Math.random() * 11) + 5) * 100);
transition = jQuery('#caption-easing-demo option');
var random = Math.floor(transition.length * (Math.random() % 1));
transition.attr('selected',false).eq(random).attr('selected',true);
jQuery('input[name="movexout"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="moveyout"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="movezout"]').val((Math.floor(Math.random() * 11) - 5) * 10);
jQuery('input[name="rotationxout"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="rotationyout"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="rotationzout"]').val((Math.floor(Math.random() * 101) - 50) * 10);
jQuery('input[name="scalexout"]').val((Math.floor(Math.random() * 31)) * 10);
jQuery('input[name="scaleyout"]').val((Math.floor(Math.random() * 31)) * 10);
jQuery('input[name="skewxout"]').val(Math.floor(Math.random() * 61));
jQuery('input[name="skewyout"]').val(Math.floor(Math.random() * 61));
jQuery('input[name="captionopacityout"]').val(0);
jQuery('input[name="captionperspectiveout"]').val(600);
jQuery('input[name="originxout"]').val((Math.floor(Math.random() * 41) - 20) * 10);
jQuery('input[name="originyout"]').val((Math.floor(Math.random() * 41) - 20) * 10);
jQuery('input[name="captionspeedout"]').val((Math.floor(Math.random() * 11) + 5) * 100);
transition = jQuery('#caption-easing-demoout option');
var random = Math.floor(transition.length * (Math.random() % 1));
transition.attr('selected',false).eq(random).attr('selected',true);
});
});
//////////////////
// IS MOBILE ?? //
//////////////////
function is_mobile() {
var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','Android', 'webos', ,'iPod', 'iPhone', 'iPad', 'Blackberry', 'BlackBerry'];
var ismobile=false;
for(i in agents) {
if (navigator.userAgent.split(agents[i]).length>1) {
ismobile = true;
}
}
return ismobile;
}
/******************************
- ANIMATION CREATOR -
********************************/
function prepareAnimateCreator() {
var cic = jQuery('#caption-inout-controll');
cic.data('direction',0);
var osw = jQuery('#outanimation .settings_wrapper');
osw.slideUp(200).addClass("collapsed");
var isw = jQuery('#inanimation .settings_wrapper');
jQuery('#outanimation .caption-demo-controll').click(function() {
if (osw.hasClass("collapsed")) {
osw.removeClass("collapsed").slideDown(200);
isw.slideUp(200).addClass("collapsed");
} else {
osw.slideUp(200).addClass("collapsed");
isw.removeClass("collapsed").slideDown(200);
}
});
jQuery('#inanimation .caption-demo-controll').click(function() {
if (isw.hasClass("collapsed")) {
isw.removeClass("collapsed").slideDown(200);
osw.slideUp(200).addClass("collapsed");
} else {
isw.slideUp(200).addClass("collapsed");
osw.removeClass("collapsed").slideDown(200);
}
});
jQuery('#caption-inout-controll').click(function() {
if (cic.data('direction')==0) {
cic.data('direction',1);
jQuery('#revshowmetheinanim').removeClass("reviconinaction");
jQuery('#revshowmetheoutanim').addClass("reviconinaction");
} else
if (cic.data('direction')==1) {
cic.data('direction',2);
jQuery('#revshowmetheinanim').addClass("reviconinaction");
jQuery('#revshowmetheoutanim').addClass("reviconinaction");
} else
if (cic.data('direction')==2) {
cic.data('direction',0);
jQuery('#revshowmetheinanim').addClass("reviconinaction");
jQuery('#revshowmetheoutanim').removeClass("reviconinaction");
}
});
startAnimationInCreator();
}
function startAnimationInCreator() {
stopAnimationInPreview();
animateCreatorIn();
}
function killAnimationInCreator() {
var nextcaption = jQuery('#caption_custon_anim_preview');
TweenLite.killTweensOf(nextcaption,false);
}
function animateCreatorIn() {
var nextcaption = jQuery('#caption_custon_anim_preview');
var cic = jQuery('#caption-inout-controll');
var transx = jQuery('input[name="movex"]').val();
var transy = jQuery('input[name="movey"]').val();
var transz = jQuery('input[name="movez"]').val();
var rotatex = jQuery('input[name="rotationx"]').val();
var rotatey = jQuery('input[name="rotationy"]').val();
var rotatez = jQuery('input[name="rotationz"]').val();
var scalex = jQuery('input[name="scalex"]').val()/100;
var scaley = jQuery('input[name="scaley"]').val()/100;
var skewx = jQuery('input[name="skewx"]').val();
var skewy = jQuery('input[name="skewy"]').val();
var opac = jQuery('input[name="captionopacity"]').val()/100;
var tper = jQuery('input[name="captionperspective"]').val();
//var tper = 600;
var originx = jQuery('input[name="originx"]').val()+"%";
var originy = jQuery('input[name="originy"]').val()+"%";
var origin = originx+" "+originy;
var speed = parseInt(jQuery('input[name="captionspeed"]').val(),0);
if (speed<100) speed=100;
var easedata = jQuery('#caption-easing-demo').val();
jQuery('#custominresult').text("x:"+transx+";y:"+transy+";z:"+transz+";"+
"rotationX:"+rotatex+";rotationY:"+rotatey+";rotationZ:"+rotatez+";"+
"scaleX:"+scalex+";scaleY:"+scaley+";"+
"skewX:"+skewx+";skewY:"+skewy+";"+
"opacity:"+opac+";"+
"transformPerspective:"+tper+";transformOrigin:"+origin+";");
jQuery('#custominspeed').text(speed);
jQuery('#custominease').text(easedata);
jQuery('#presplitin').text(jQuery('#caption-splitin-demo').val());
jQuery('#presplitout').text(jQuery('#caption-splitout-demo').val());
jQuery('#predelayin').text(jQuery('input[name="splitspeedin"]').val()/1000);
jQuery('#predleayout').text(jQuery('input[name="splitspeedout"]').val()/1000);
speed=speed/1000;
var xx = jQuery('.tp-present-wrapper').width()/2 - 72;
var yy=jQuery('.tp-present-wrapper').height()/2 - 17;
if (nextcaption.data('mySplitText') != undefined)
nextcaption.data('mySplitText').revert();
nextcaption.data('splitin',jQuery('#caption-splitin-demo').val());
var animobject = nextcaption;
var splitspeed = 0;
var delayer = 1;
if (nextcaption.data('splitin') == "chars" || nextcaption.data('splitin') == "words" || nextcaption.data('splitin') == "lines") {
if (nextcaption.find('a').length>0)
nextcaption.data('mySplitText',new SplitText(nextcaption.find('a'),{type:"lines,words,chars",charsClass:"tp-splitted",wordsClass:"tp-splitted",linesClass:"tp-splitted"}));
else
nextcaption.data('mySplitText',new SplitText(nextcaption,{type:"lines,words,chars",charsClass:"tp-splitted",wordsClass:"tp-splitted",linesClass:"tp-splitted"}));
nextcaption.addClass("splitted");
splitspeed = jQuery('input[name="splitspeedin"]').val()/1000;
}
if (nextcaption.data('splitin') == "chars") {
animobject = nextcaption.data('mySplitText').chars;
delayer = animobject.length;
}
if (nextcaption.data('splitin') == "words") {
animobject = nextcaption.data('mySplitText').words;
delayer = animobject.length;
}
if (nextcaption.data('splitin') == "lines") {
animobject = nextcaption.data('mySplitText').lines;
delayer = animobject.length;
}
TweenLite.fromTo(nextcaption,speed,{top:yy, left:xx, opacity:opac},{top:yy, left:xx, opacity:1});
var newtl = new TimelineLite();
TweenLite.killTweensOf(animobject,false);
newtl.staggerFromTo(animobject,speed,
{ scaleX:scalex,
scaleY:scaley,
rotationX:rotatex,
rotationY:rotatey,
rotationZ:rotatez,
x:transx,
y:transy,
z:transz+1,
skewX:skewx,
skewY:skewy,
transformPerspective:tper,
transformOrigin:origin,
visibility:'hidden'},
{
x:0,
y:0,
scaleX:1,
scaleY:1,
rotationX:0,
rotationY:0,
rotationZ:0,
skewX:0,
skewY:0,
z:1,
visibility:'visible',
opacity:1,
ease:easedata,
overwrite:"all"
},splitspeed);
setTimeout(function() {animateCreatorOut()},(splitspeed/1000 * delayer) + (speed*1000)+500);
}
function animateCreatorOut() {
var nextcaption = jQuery('#caption_custon_anim_preview');
var cic = jQuery('#caption-inout-controll');
var transx = jQuery('input[name="movexout"]').val();
var transy = jQuery('input[name="moveyout"]').val();
var transz = jQuery('input[name="movezout"]').val();
var rotatex = jQuery('input[name="rotationxout"]').val();
var rotatey = jQuery('input[name="rotationyout"]').val();
var rotatez = jQuery('input[name="rotationzout"]').val();
var scalex = jQuery('input[name="scalexout"]').val()/100;
var scaley = jQuery('input[name="scaleyout"]').val()/100;
var skewx = jQuery('input[name="skewxout"]').val();
var skewy = jQuery('input[name="skewyout"]').val();
var opac = jQuery('input[name="captionopacityout"]').val()/100;
var tper = jQuery('input[name="captionperspectiveout"]').val();
//var tper = 600;
var originx = jQuery('input[name="originxout"]').val()+"%";
var originy = jQuery('input[name="originyout"]').val()+"%";
var origin = originx+" "+originy;
var speed = parseInt(jQuery('input[name="captionspeedout"]').val(),0);
if (speed<100) speed=100;
var easedata = jQuery('#caption-easing-demoout').val();
jQuery('#customoutresult').text("x:"+transx+";y:"+transy+";z:"+transz+";"+
"rotationX:"+rotatex+";rotationY:"+rotatey+";rotationZ:"+rotatez+";"+
"scaleX:"+scalex+";scaleY:"+scaley+";"+
"skewX:"+skewx+";skewY:"+skewy+";"+
"opacity:"+opac+";"+
"transformPerspective:"+tper+";transformOrigin:"+origin+";");
jQuery('#customoutspeed').text(speed);
jQuery('#customoutease').text(easedata);
jQuery('#presplitin').text(jQuery('#caption-splitin-demo').val());
jQuery('#presplitout').text(jQuery('#caption-splitout-demo').val());
jQuery('#predelayin').text(jQuery('input[name="splitspeedin"]').val()/1000);
jQuery('#predleayout').text(jQuery('input[name="splitspeedout"]').val()/1000);
speed=speed/1000;
var xx = jQuery('.tp-present-wrapper').width()/2 - 72;
var yy=jQuery('.tp-present-wrapper').height()/2 - 17;
if (nextcaption.data('mySplitText') != undefined)
nextcaption.data('mySplitText').revert();
nextcaption.data('splitout',jQuery('#caption-splitout-demo').val());
var animobject = nextcaption;
var splitspeed = 0;
var delayer = 1;
if (nextcaption.data('splitout') == "chars" || nextcaption.data('splitout') == "words" || nextcaption.data('splitout') == "lines") {
if (nextcaption.find('a').length>0)
nextcaption.data('mySplitText',new SplitText(nextcaption.find('a'),{type:"lines,words,chars",charsClass:"tp-splitted",wordsClass:"tp-splitted",linesClass:"tp-splitted"}));
else
nextcaption.data('mySplitText',new SplitText(nextcaption,{type:"lines,words,chars",charsClass:"tp-splitted",wordsClass:"tp-splitted",linesClass:"tp-splitted"}));
nextcaption.addClass("splitted");
splitspeed = jQuery('input[name="splitspeedout"]').val()/1000;
}
if (nextcaption.data('splitout') == "chars") {
animobject = nextcaption.data('mySplitText').chars;
delayer = animobject.length;
}
if (nextcaption.data('splitout') == "words") {
animobject = nextcaption.data('mySplitText').words;
delayer = animobject.length;
}
if (nextcaption.data('splitout') == "lines") {
animobject = nextcaption.data('mySplitText').lines;
delayer = animobject.length;
}
if (nextcaption == animobject)
TweenLite.fromTo(nextcaption,speed,{top:yy, left:xx, opacity:1},{top:yy, left:xx, opacity:opac});
else {
TweenLite.set(nextcaption,{top:yy, left:xx, opacity:1});
setTimeout(function() {TweenLite.fromTo(nextcaption,0.3,{top:yy, left:xx, opacity:1},{top:yy, left:xx, opacity:opac});},(splitspeed*1000 * delayer) + (speed*1000));
}
var newtl = new TimelineLite();
TweenLite.killTweensOf(animobject,false);
newtl.staggerFromTo(animobject,speed,
{
x:0,
y:0,
scaleX:1,
scaleY:1,
rotationX:0,
rotationY:0,
rotationZ:0,
skewX:0,
skewY:0,
z:1,
visibility:'visible',
opacity:1
},
{
scaleX:scalex,
scaleY:scaley,
rotationX:rotatex,
rotationY:rotatey,
rotationZ:rotatez,
x:transx,
y:transy,
z:transz+1,
skewX:skewx,
skewY:skewy,
left:xx,
top:yy,
transformPerspective:tper,
transformOrigin:origin,
ease:easedata,
overwrite:"all",
delay:0.3,
opacity:opac
},splitspeed);
setTimeout(function() {animateCreatorIn()},(splitspeed*1000 * delayer) + (speed*1000)+500);
}
/******************************
- PLAY IN ANIMATION -
********************************/
function stopAnimationInPreview() {
var nextcaption = jQuery('#preview_caption_animateme');
TweenLite.killTweensOf(nextcaption,false);
if (nextcaption.data("timer")) clearTimeout(nextcaption.data('timer'));
if (nextcaption.data("timera")) clearTimeout(nextcaption.data('timera'));
}

View File

@@ -0,0 +1,577 @@
@charset "UTF-8";
@font-face {
font-family: 'fontello';
src: url("fontello/fontello.eot");
src: url("fontello/fontello.eot?#iefix") format('embedded-opentype'), url("fontello/fontello.woff") format('woff'), url("fontello/fontello.ttf") format('truetype'), url("fontello/fontello.svg#fontello") format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fontello-social';
src: url("fontello/fontello-social.eot");
src: url("fontello/fontello-social.eot?#iefix") format('embedded-opentype'), url("fontello/fontello-social.woff") format('woff'), url("fontello/fontello-social.ttf") format('truetype'), url("fontello/fontello-social.svg#fontello") format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'fontello';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
[class^="social-"]:before,
[class*=" social-"]:before {
font-family: 'fontello-social';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0;
text-align: center;
line-height: 1em;
}
.icon-plus:before { content: '\2b'; } /* '+' */
.icon-plus-1:before { content: '\e817'; } /* '' */
.icon-minus:before { content: '\2d'; } /* '-' */
.icon-minus-1:before { content: '\e816'; } /* '' */
.icon-info:before { content: '\2139'; } /* '' */
.icon-left-thin:before { content: '\2190'; } /* '←' */
.icon-left-1:before { content: '\e847'; } /* '' */
.icon-up-thin:before { content: '\2191'; } /* '↑' */
.icon-up-1:before { content: '\e845'; } /* '' */
.icon-right-thin:before { content: '\2192'; } /* '→' */
.icon-right-1:before { content: '\e846'; } /* '' */
.icon-down-thin:before { content: '\2193'; } /* '↓' */
.icon-down-1:before { content: '\e848'; } /* '' */
.icon-level-up:before { content: '\21b0'; } /* '↰' */
.icon-level-down:before { content: '\21b3'; } /* '↳' */
.icon-switch:before { content: '\21c6'; } /* '⇆' */
.icon-infinity:before { content: '\221e'; } /* '∞' */
.icon-plus-squared:before { content: '\229e'; } /* '⊞' */
.icon-minus-squared:before { content: '\229f'; } /* '⊟' */
.icon-home:before { content: '\2302'; } /* '⌂' */
.icon-home-1:before { content: '\e811'; } /* '' */
.icon-keyboard:before { content: '\2328'; } /* '⌨' */
.icon-erase:before { content: '\232b'; } /* '⌫' */
.icon-pause:before { content: '\2389'; } /* '⎉' */
.icon-pause-1:before { content: '\e851'; } /* '' */
.icon-fast-forward:before { content: '\23e9'; } /* '⏩' */
.icon-fast-fw:before { content: '\e856'; } /* '' */
.icon-fast-backward:before { content: '\23ea'; } /* '⏪' */
.icon-fast-bw:before { content: '\e857'; } /* '' */
.icon-to-end:before { content: '\23ed'; } /* '⏭' */
.icon-to-end-1:before { content: '\e852'; } /* '' */
.icon-to-start:before { content: '\23ee'; } /* '⏮' */
.icon-to-start-1:before { content: '\e854'; } /* '' */
.icon-hourglass:before { content: '\23f3'; } /* '⏳' */
.icon-stop:before { content: '\25a0'; } /* '■' */
.icon-stop-1:before { content: '\25aa'; } /* '▪' */
.icon-up-dir:before { content: '\25b4'; } /* '▴' */
.icon-up-dir-1:before { content: '\e841'; } /* '' */
.icon-play:before { content: '\25b6'; } /* '▶' */
.icon-play-1:before { content: '\e84f'; } /* '' */
.icon-right-dir:before { content: '\25b8'; } /* '▸' */
.icon-right-dir-1:before { content: '\e84d'; } /* '' */
.icon-down-dir:before { content: '\25be'; } /* '▾' */
.icon-down-dir-1:before { content: '\e840'; } /* '' */
.icon-left-dir:before { content: '\25c2'; } /* '◂' */
.icon-left-dir-1:before { content: '\e842'; } /* '' */
.icon-adjust:before { content: '\25d1'; } /* '◑' */
.icon-cloud:before { content: '\2601'; } /* '☁' */
.icon-cloud-1:before { content: '\e85c'; } /* '' */
.icon-umbrella:before { content: '\2602'; } /* '☂' */
.icon-star:before { content: '\2605'; } /* '★' */
.icon-star-1:before { content: '\e805'; } /* '' */
.icon-star-empty:before { content: '\2606'; } /* '☆' */
.icon-star-empty-1:before { content: '\e806'; } /* '' */
.icon-check-1:before { content: '\2611'; } /* '☑' */
.icon-cup:before { content: '\2615'; } /* '☕' */
.icon-left-hand:before { content: '\261c'; } /* '☜' */
.icon-up-hand:before { content: '\261d'; } /* '☝' */
.icon-right-hand:before { content: '\261e'; } /* '☞' */
.icon-down-hand:before { content: '\261f'; } /* '☟' */
.icon-menu:before { content: '\2630'; } /* '☰' */
.icon-th-list:before { content: '\e81b'; } /* '' */
.icon-moon:before { content: '\263d'; } /* '☽' */
.icon-heart-empty:before { content: '\2661'; } /* '♡' */
.icon-heart-empty-1:before { content: '\e804'; } /* '' */
.icon-heart:before { content: '\2665'; } /* '♥' */
.icon-heart-1:before { content: '\e803'; } /* '' */
.icon-note:before { content: '\266a'; } /* '♪' */
.icon-note-beamed:before { content: '\266b'; } /* '♫' */
.icon-music-1:before { content: '\e800'; } /* '' */
.icon-th:before { content: '\268f'; } /* '⚏' */
.icon-layout:before { content: '\e80c'; } /* '' */
.icon-flag:before { content: '\2691'; } /* '⚑' */
.icon-flag-1:before { content: '\e81f'; } /* '' */
.icon-tools:before { content: '\2692'; } /* '⚒' */
.icon-cog:before { content: '\2699'; } /* '⚙' */
.icon-cog-1:before { content: '\e82e'; } /* '' */
.icon-attention:before { content: '\26a0'; } /* '⚠' */
.icon-attention-1:before { content: '\e834'; } /* '' */
.icon-flash:before { content: '\26a1'; } /* '⚡' */
.icon-flash-1:before { content: '\e85d'; } /* '' */
.icon-record:before { content: '\26ab'; } /* '⚫' */
.icon-cloud-thunder:before { content: '\26c8'; } /* '⛈' */
.icon-cog-alt:before { content: '\26ef'; } /* '⛯' */
.icon-scissors:before { content: '\2702'; } /* '✂' */
.icon-tape:before { content: '\2707'; } /* '✇' */
.icon-flight:before { content: '\2708'; } /* '✈' */
.icon-flight-1:before { content: '\e86f'; } /* '' */
.icon-mail:before { content: '\2709'; } /* '✉' */
.icon-mail-1:before { content: '\e802'; } /* '' */
.icon-edit:before { content: '\270d'; } /* '✍' */
.icon-pencil:before { content: '\270e'; } /* '✎' */
.icon-pencil-1:before { content: '\e826'; } /* '' */
.icon-feather:before { content: '\2712'; } /* '✒' */
.icon-check:before { content: '\2713'; } /* '✓' */
.icon-ok:before { content: '\e81a'; } /* '' */
.icon-ok-circle:before { content: '\2714'; } /* '✔' */
.icon-cancel:before { content: '\2715'; } /* '✕' */
.icon-cancel-1:before { content: '\e819'; } /* '' */
.icon-cancel-circled:before { content: '\2716'; } /* '✖' */
.icon-cancel-circle:before { content: '\e818'; } /* '' */
.icon-asterisk:before { content: '\2731'; } /* '✱' */
.icon-cancel-squared:before { content: '\274e'; } /* '❎' */
.icon-help:before { content: '\2753'; } /* '❓' */
.icon-attention-circle:before { content: '\2757'; } /* '❗' */
.icon-quote:before { content: '\275e'; } /* '❞' */
.icon-plus-circled:before { content: '\2795'; } /* '' */
.icon-plus-circle:before { content: '\e815'; } /* '' */
.icon-minus-circled:before { content: '\2796'; } /* '' */
.icon-minus-circle:before { content: '\e814'; } /* '' */
.icon-right:before { content: '\27a1'; } /* '➡' */
.icon-direction:before { content: '\27a2'; } /* '➢' */
.icon-forward:before { content: '\27a6'; } /* '➦' */
.icon-forward-1:before { content: '\e824'; } /* '' */
.icon-ccw:before { content: '\27f2'; } /* '⟲' */
.icon-cw:before { content: '\27f3'; } /* '⟳' */
.icon-cw-1:before { content: '\e844'; } /* '' */
.icon-left:before { content: '\2b05'; } /* '⬅' */
.icon-up:before { content: '\2b06'; } /* '⬆' */
.icon-down:before { content: '\2b07'; } /* '⬇' */
.icon-resize-vertical:before { content: '\2b0c'; } /* '⬌' */
.icon-resize-horizontal:before { content: '\2b0d'; } /* '⬍' */
.icon-eject:before { content: '\2ecf'; } /* '⻏' */
.icon-list-add:before { content: '\e003'; } /* '' */
.icon-list:before { content: '\e005'; } /* '' */
.icon-left-bold:before { content: '\e4ad'; } /* '' */
.icon-right-bold:before { content: '\e4ae'; } /* '' */
.icon-up-bold:before { content: '\e4af'; } /* '' */
.icon-down-bold:before { content: '\e4b0'; } /* '' */
.icon-user-add:before { content: '\e700'; } /* '' */
.icon-star-half:before { content: '\e701'; } /* '' */
.icon-ok-circle2:before { content: '\e702'; } /* '' */
.icon-cancel-circle2:before { content: '\e703'; } /* '' */
.icon-help-circled:before { content: '\e704'; } /* '' */
.icon-help-circle:before { content: '\e813'; } /* '' */
.icon-info-circled:before { content: '\e705'; } /* '' */
.icon-info-circle:before { content: '\e812'; } /* '' */
.icon-th-large:before { content: '\e708'; } /* '' */
.icon-eye:before { content: '\e70a'; } /* '' */
.icon-eye-1:before { content: '\e81c'; } /* '' */
.icon-eye-off:before { content: '\e70b'; } /* '' */
.icon-tag:before { content: '\e70c'; } /* '' */
.icon-tag-1:before { content: '\e81d'; } /* '' */
.icon-tags:before { content: '\e70d'; } /* '' */
.icon-camera-alt:before { content: '\e70f'; } /* '' */
.icon-upload-cloud:before { content: '\e711'; } /* '' */
.icon-reply:before { content: '\e712'; } /* '' */
.icon-reply-all:before { content: '\e713'; } /* '' */
.icon-code:before { content: '\e714'; } /* '' */
.icon-export:before { content: '\e715'; } /* '' */
.icon-export-1:before { content: '\e825'; } /* '' */
.icon-print:before { content: '\e716'; } /* '' */
.icon-print-1:before { content: '\e827'; } /* '' */
.icon-retweet:before { content: '\e717'; } /* '' */
.icon-retweet-1:before { content: '\e828'; } /* '' */
.icon-comment:before { content: '\e718'; } /* '' */
.icon-comment-1:before { content: '\e829'; } /* '' */
.icon-chat:before { content: '\e720'; } /* '' */
.icon-chat-1:before { content: '\e82a'; } /* '' */
.icon-vcard:before { content: '\e722'; } /* '' */
.icon-address:before { content: '\e723'; } /* '' */
.icon-location:before { content: '\e724'; } /* '' */
.icon-location-1:before { content: '\e833'; } /* '' */
.icon-map:before { content: '\e727'; } /* '' */
.icon-compass:before { content: '\e728'; } /* '' */
.icon-trash:before { content: '\e729'; } /* '' */
.icon-trash-1:before { content: '\e832'; } /* '' */
.icon-doc:before { content: '\e730'; } /* '' */
.icon-doc-text-inv:before { content: '\e731'; } /* '' */
.icon-docs:before { content: '\e736'; } /* '' */
.icon-doc-landscape:before { content: '\e737'; } /* '' */
.icon-archive:before { content: '\e738'; } /* '' */
.icon-rss:before { content: '\e73a'; } /* '' */
.icon-share:before { content: '\e73c'; } /* '' */
.icon-basket:before { content: '\e73d'; } /* '' */
.icon-basket-1:before { content: '\e82d'; } /* '' */
.icon-shareable:before { content: '\e73e'; } /* '' */
.icon-login:before { content: '\e740'; } /* '' */
.icon-login-1:before { content: '\e82b'; } /* '' */
.icon-logout:before { content: '\e741'; } /* '' */
.icon-logout-1:before { content: '\e836'; } /* '' */
.icon-volume:before { content: '\e742'; } /* '' */
.icon-resize-full:before { content: '\e744'; } /* '' */
.icon-resize-full-1:before { content: '\e83b'; } /* '' */
.icon-resize-small:before { content: '\e746'; } /* '' */
.icon-resize-small-1:before { content: '\e83c'; } /* '' */
.icon-popup:before { content: '\e74c'; } /* '' */
.icon-publish:before { content: '\e74d'; } /* '' */
.icon-window:before { content: '\e74e'; } /* '' */
.icon-arrow-combo:before { content: '\e74f'; } /* '' */
.icon-zoom-in:before { content: '\e750'; } /* '' */
.icon-chart-pie:before { content: '\e751'; } /* '' */
.icon-zoom-out:before { content: '\e83d'; } /* '' */
.icon-language:before { content: '\e752'; } /* '' */
.icon-air:before { content: '\e753'; } /* '' */
.icon-database:before { content: '\e754'; } /* '' */
.icon-drive:before { content: '\e755'; } /* '' */
.icon-bucket:before { content: '\e756'; } /* '' */
.icon-thermometer:before { content: '\e757'; } /* '' */
.icon-down-circled:before { content: '\e758'; } /* '' */
.icon-down-circle2:before { content: '\e83e'; } /* '' */
.icon-left-circled:before { content: '\e759'; } /* '' */
.icon-right-circled:before { content: '\e75a'; } /* '' */
.icon-up-circled:before { content: '\e75b'; } /* '' */
.icon-up-circle2:before { content: '\e83f'; } /* '' */
.icon-down-open:before { content: '\e75c'; } /* '' */
.icon-down-open-1:before { content: '\e84c'; } /* '' */
.icon-left-open:before { content: '\e75d'; } /* '' */
.icon-left-open-1:before { content: '\e84b'; } /* '' */
.icon-right-open:before { content: '\e75e'; } /* '' */
.icon-right-open-1:before { content: '\e84a'; } /* '' */
.icon-up-open:before { content: '\e75f'; } /* '' */
.icon-up-open-1:before { content: '\e849'; } /* '' */
.icon-down-open-mini:before { content: '\e760'; } /* '' */
.icon-arrows-cw:before { content: '\e843'; } /* '' */
.icon-left-open-mini:before { content: '\e761'; } /* '' */
.icon-play-circle2:before { content: '\e850'; } /* '' */
.icon-right-open-mini:before { content: '\e762'; } /* '' */
.icon-to-end-alt:before { content: '\e853'; } /* '' */
.icon-up-open-mini:before { content: '\e763'; } /* '' */
.icon-to-start-alt:before { content: '\e855'; } /* '' */
.icon-down-open-big:before { content: '\e764'; } /* '' */
.icon-left-open-big:before { content: '\e765'; } /* '' */
.icon-right-open-big:before { content: '\e766'; } /* '' */
.icon-up-open-big:before { content: '\e767'; } /* '' */
.icon-progress-0:before { content: '\e768'; } /* '' */
.icon-progress-1:before { content: '\e769'; } /* '' */
.icon-progress-2:before { content: '\e76a'; } /* '' */
.icon-progress-3:before { content: '\e76b'; } /* '' */
.icon-back-in-time:before { content: '\e771'; } /* '' */
.icon-network:before { content: '\e776'; } /* '' */
.icon-inbox:before { content: '\e777'; } /* '' */
.icon-inbox-1:before { content: '\e85a'; } /* '' */
.icon-install:before { content: '\e778'; } /* '' */
.icon-font:before { content: '\e779'; } /* '' */
.icon-bold:before { content: '\e77a'; } /* '' */
.icon-italic:before { content: '\e77b'; } /* '' */
.icon-text-height:before { content: '\e77c'; } /* '' */
.icon-text-width:before { content: '\e77d'; } /* '' */
.icon-align-left:before { content: '\e77e'; } /* '' */
.icon-align-center:before { content: '\e77f'; } /* '' */
.icon-align-right:before { content: '\e780'; } /* '' */
.icon-align-justify:before { content: '\e781'; } /* '' */
.icon-list-1:before { content: '\e782'; } /* '' */
.icon-indent-left:before { content: '\e783'; } /* '' */
.icon-indent-right:before { content: '\e784'; } /* '' */
.icon-lifebuoy:before { content: '\e788'; } /* '' */
.icon-mouse:before { content: '\e789'; } /* '' */
.icon-dot:before { content: '\e78b'; } /* '' */
.icon-dot-2:before { content: '\e78c'; } /* '' */
.icon-dot-3:before { content: '\e78d'; } /* '' */
.icon-suitcase:before { content: '\e78e'; } /* '' */
.icon-off:before { content: '\e86a'; } /* '' */
.icon-road:before { content: '\e78f'; } /* '' */
.icon-flow-cascade:before { content: '\e790'; } /* '' */
.icon-list-alt:before { content: '\e869'; } /* '' */
.icon-flow-branch:before { content: '\e791'; } /* '' */
.icon-qrcode:before { content: '\e868'; } /* '' */
.icon-flow-tree:before { content: '\e792'; } /* '' */
.icon-barcode:before { content: '\e867'; } /* '' */
.icon-flow-line:before { content: '\e793'; } /* '' */
.icon-ajust:before { content: '\e865'; } /* '' */
.icon-flow-parallel:before { content: '\e794'; } /* '' */
.icon-tint:before { content: '\e864'; } /* '' */
.icon-brush:before { content: '\e79a'; } /* '' */
.icon-paper-plane:before { content: '\e79b'; } /* '' */
.icon-magnet:before { content: '\e7a1'; } /* '' */
.icon-magnet-1:before { content: '\e863'; } /* '' */
.icon-gauge:before { content: '\e7a2'; } /* '' */
.icon-traffic-cone:before { content: '\e7a3'; } /* '' */
.icon-cc:before { content: '\e7a5'; } /* '' */
.icon-cc-by:before { content: '\e7a6'; } /* '' */
.icon-cc-nc:before { content: '\e7a7'; } /* '' */
.icon-cc-nc-eu:before { content: '\e7a8'; } /* '' */
.icon-cc-nc-jp:before { content: '\e7a9'; } /* '' */
.icon-cc-sa:before { content: '\e7aa'; } /* '' */
.icon-cc-nd:before { content: '\e7ab'; } /* '' */
.icon-cc-pd:before { content: '\e7ac'; } /* '' */
.icon-cc-zero:before { content: '\e7ad'; } /* '' */
.icon-cc-share:before { content: '\e7ae'; } /* '' */
.icon-cc-remix:before { content: '\e7af'; } /* '' */
.icon-move:before { content: '\f047'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-bookmark-empty:before { content: '\f097'; } /* '' */
.icon-phone-squared:before { content: '\f098'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-github:before { content: '\f09b'; } /* '' */
.icon-rss-1:before { content: '\f09e'; } /* '' */
.icon-hdd:before { content: '\f0a0'; } /* '' */
.icon-certificate:before { content: '\f0a3'; } /* '' */
.icon-left-circled-1:before { content: '\f0a8'; } /* '' */
.icon-right-circled-1:before { content: '\f0a9'; } /* '' */
.icon-up-circled-1:before { content: '\f0aa'; } /* '' */
.icon-down-circled-1:before { content: '\f0ab'; } /* '' */
.icon-tasks:before { content: '\f0ae'; } /* '' */
.icon-filter:before { content: '\f0b0'; } /* '' */
.icon-resize-full-alt:before { content: '\f0b2'; } /* '' */
.icon-beaker:before { content: '\f0c3'; } /* '' */
.icon-docs-1:before { content: '\f0c5'; } /* '' */
.icon-blank:before { content: '\f0c8'; } /* '' */
.icon-menu-1:before { content: '\f0c9'; } /* '' */
.icon-list-bullet:before { content: '\f0ca'; } /* '' */
.icon-list-numbered:before { content: '\f0cb'; } /* '' */
.icon-strike:before { content: '\f0cc'; } /* '' */
.icon-underline:before { content: '\f0cd'; } /* '' */
.icon-table:before { content: '\f0ce'; } /* '' */
.icon-magic:before { content: '\f0d0'; } /* '' */
.icon-pinterest-circled-1:before { content: '\f0d2'; } /* '' */
.icon-pinterest-squared:before { content: '\f0d3'; } /* '' */
.icon-gplus-squared:before { content: '\f0d4'; } /* '' */
.icon-gplus:before { content: '\f0d5'; } /* '' */
.icon-money:before { content: '\f0d6'; } /* '' */
.icon-columns:before { content: '\f0db'; } /* '' */
.icon-sort:before { content: '\f0dc'; } /* '' */
.icon-sort-down:before { content: '\f0dd'; } /* '' */
.icon-sort-up:before { content: '\f0de'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-linkedin:before { content: '\f0e1'; } /* '' */
.icon-gauge-1:before { content: '\f0e4'; } /* '' */
.icon-comment-empty:before { content: '\f0e5'; } /* '' */
.icon-chat-empty:before { content: '\f0e6'; } /* '' */
.icon-sitemap:before { content: '\f0e8'; } /* '' */
.icon-paste:before { content: '\f0ea'; } /* '' */
.icon-user-md:before { content: '\f200'; } /* '' */
.icon-s-github:before { content: '\f300'; } /* '' */
.icon-github-squared:before { content: '\e862'; } /* '' */
.icon-github-circled:before { content: '\f301'; } /* '' */
.icon-s-flickr:before { content: '\f303'; } /* '' */
.icon-twitter-squared:before { content: '\e85f'; } /* '' */
.icon-s-vimeo:before { content: '\f306'; } /* '' */
.icon-vimeo-circled:before { content: '\f307'; } /* '' */
.icon-facebook-squared-1:before { content: '\f308'; } /* '' */
.icon-s-twitter:before { content: '\f309'; } /* '' */
.icon-twitter-circled:before { content: '\f30a'; } /* '' */
.icon-s-facebook:before { content: '\f30c'; } /* '' */
.icon-linkedin-squared:before { content: '\e870'; } /* '' */
.icon-facebook-circled:before { content: '\f30d'; } /* '' */
.icon-s-gplus:before { content: '\f30f'; } /* '' */
.icon-gplus-circled:before { content: '\f310'; } /* '' */
.icon-s-pinterest:before { content: '\f312'; } /* '' */
.icon-pinterest-circled:before { content: '\f313'; } /* '' */
.icon-s-tumblr:before { content: '\f315'; } /* '' */
.icon-tumblr-circled:before { content: '\f316'; } /* '' */
.icon-s-linkedin:before { content: '\f318'; } /* '' */
.icon-linkedin-circled:before { content: '\f319'; } /* '' */
.icon-s-dribbble:before { content: '\f31b'; } /* '' */
.icon-dribbble-circled:before { content: '\f31c'; } /* '' */
.icon-s-stumbleupon:before { content: '\f31e'; } /* '' */
.icon-stumbleupon-circled:before { content: '\f31f'; } /* '' */
.icon-s-lastfm:before { content: '\f321'; } /* '' */
.icon-lastfm-circled:before { content: '\f322'; } /* '' */
.icon-rdio:before { content: '\f324'; } /* '' */
.icon-rdio-circled:before { content: '\f325'; } /* '' */
.icon-spotify:before { content: '\f327'; } /* '' */
.icon-s-spotify-circled:before { content: '\f328'; } /* '' */
.icon-qq:before { content: '\f32a'; } /* '' */
.icon-s-instagrem:before { content: '\f32d'; } /* '' */
.icon-dropbox:before { content: '\f330'; } /* '' */
.icon-s-evernote:before { content: '\f333'; } /* '' */
.icon-flattr:before { content: '\f336'; } /* '' */
.icon-s-skype:before { content: '\f339'; } /* '' */
.icon-skype-circled:before { content: '\f33a'; } /* '' */
.icon-renren:before { content: '\f33c'; } /* '' */
.icon-sina-weibo:before { content: '\f33f'; } /* '' */
.icon-s-paypal:before { content: '\f342'; } /* '' */
.icon-s-picasa:before { content: '\f345'; } /* '' */
.icon-s-soundcloud:before { content: '\f348'; } /* '' */
.icon-s-behance:before { content: '\f34e'; } /* '' */
.icon-google-circles:before { content: '\f351'; } /* '' */
.icon-vkontakte:before { content: '\f354'; } /* '' */
.icon-smashing:before { content: '\f357'; } /* '' */
.icon-db-shape:before { content: '\f600'; } /* '' */
.icon-sweden:before { content: '\f601'; } /* '' */
.icon-logo-db:before { content: '\f603'; } /* '' */
.icon-picture:before { content: '\f304'; } /* '' */
.icon-picture-1:before { content: '\e80a'; } /* '' */
.icon-globe:before { content: '\f30e'; } /* '' */
.icon-globe-1:before { content: '\e85b'; } /* '' */
.icon-leaf-1:before { content: '\e86d'; } /* '' */
.icon-lemon:before { content: '\f34b'; } /* '' */
.icon-glass:before { content: '\f378'; } /* '' */
.icon-gift:before { content: '\f381'; } /* '' */
.icon-graduation-cap:before { content: '\f393'; } /* '' */
.icon-mic:before { content: '\f3a4'; } /* '' */
.icon-videocam:before { content: '\f3a5'; } /* '' */
.icon-headphones:before { content: '\f3a7'; } /* '' */
.icon-palette:before { content: '\f3a8'; } /* '' */
.icon-ticket:before { content: '\f3ab'; } /* '' */
.icon-video:before { content: '\f3ac'; } /* '' */
.icon-video-1:before { content: '\e809'; } /* '' */
.icon-target:before { content: '\f3af'; } /* '' */
.icon-target-1:before { content: '\e858'; } /* '' */
.icon-music:before { content: '\f3b5'; } /* '' */
.icon-trophy:before { content: '\f3c6'; } /* '' */
.icon-award:before { content: '\f3c9'; } /* '' */
.icon-thumbs-up:before { content: '\f44d'; } /* '' */
.icon-thumbs-up-1:before { content: '\e820'; } /* '' */
.icon-thumbs-down:before { content: '\f44e'; } /* '' */
.icon-thumbs-down-1:before { content: '\e821'; } /* '' */
.icon-bag:before { content: '\f45c'; } /* '' */
.icon-user:before { content: '\f464'; } /* '' */
.icon-user-1:before { content: '\e807'; } /* '' */
.icon-users:before { content: '\f465'; } /* '' */
.icon-users-1:before { content: '\e808'; } /* '' */
.icon-lamp:before { content: '\f4a1'; } /* '' */
.icon-alert:before { content: '\f4a5'; } /* '' */
.icon-water:before { content: '\f4a6'; } /* '' */
.icon-droplet:before { content: '\f4a7'; } /* '' */
.icon-credit-card:before { content: '\f4b3'; } /* '' */
.icon-credit-card-1:before { content: '\e860'; } /* '' */
.icon-monitor:before { content: '\f4bb'; } /* '' */
.icon-briefcase:before { content: '\f4bc'; } /* '' */
.icon-briefcase-1:before { content: '\e86c'; } /* '' */
.icon-floppy:before { content: '\f4be'; } /* '' */
.icon-floppy-1:before { content: '\e85e'; } /* '' */
.icon-cd:before { content: '\f4bf'; } /* '' */
.icon-folder:before { content: '\f4c1'; } /* '' */
.icon-folder-1:before { content: '\e830'; } /* '' */
.icon-folder-open:before { content: '\f4c2'; } /* '' */
.icon-doc-text:before { content: '\f4c4'; } /* '' */
.icon-doc-1:before { content: '\e831'; } /* '' */
.icon-calendar:before { content: '\f4c5'; } /* '' */
.icon-calendar-1:before { content: '\e82c'; } /* '' */
.icon-chart-line:before { content: '\f4c8'; } /* '' */
.icon-chart-bar:before { content: '\f4ca'; } /* '' */
.icon-chart-bar-1:before { content: '\e861'; } /* '' */
.icon-clipboard:before { content: '\f4cb'; } /* '' */
.icon-pin:before { content: '\f4cc'; } /* '' */
.icon-attach:before { content: '\f4ce'; } /* '' */
.icon-attach-1:before { content: '\e80f'; } /* '' */
.icon-bookmarks:before { content: '\f4d1'; } /* '' */
.icon-book:before { content: '\f4d5'; } /* '' */
.icon-book-1:before { content: '\e866'; } /* '' */
.icon-book-open:before { content: '\f4d6'; } /* '' */
.icon-phone:before { content: '\f4de'; } /* '' */
.icon-phone-1:before { content: '\e82f'; } /* '' */
.icon-megaphone:before { content: '\f4e3'; } /* '' */
.icon-megaphone-1:before { content: '\e86e'; } /* '' */
.icon-upload:before { content: '\f4e4'; } /* '' */
.icon-upload-1:before { content: '\e823'; } /* '' */
.icon-download:before { content: '\f4e5'; } /* '' */
.icon-download-1:before { content: '\e822'; } /* '' */
.icon-box:before { content: '\f4e6'; } /* '' */
.icon-newspaper:before { content: '\f4f0'; } /* '' */
.icon-mobile:before { content: '\f4f1'; } /* '' */
.icon-signal:before { content: '\f4f6'; } /* '' */
.icon-signal-1:before { content: '\e859'; } /* '' */
.icon-camera:before { content: '\f4f7'; } /* '' */
.icon-camera-1:before { content: '\e80b'; } /* '' */
.icon-shuffle:before { content: '\f500'; } /* '' */
.icon-shuffle-1:before { content: '\e84e'; } /* '' */
.icon-loop:before { content: '\f501'; } /* '' */
.icon-arrows-ccw:before { content: '\f504'; } /* '' */
.icon-light-down:before { content: '\f505'; } /* '' */
.icon-light-up:before { content: '\f506'; } /* '' */
.icon-mute:before { content: '\f507'; } /* '' */
.icon-volume-off:before { content: '\e837'; } /* '' */
.icon-volume-down:before { content: '\f509'; } /* '' */
.icon-sound:before { content: '\f50a'; } /* '' */
.icon-volume-up:before { content: '\e838'; } /* '' */
.icon-battery:before { content: '\f50b'; } /* '' */
.icon-search:before { content: '\f50d'; } /* '' */
.icon-search-1:before { content: '\e801'; } /* '' */
.icon-key:before { content: '\f511'; } /* '' */
.icon-key-1:before { content: '\e86b'; } /* '' */
.icon-lock:before { content: '\f512'; } /* '' */
.icon-lock-1:before { content: '\e80e'; } /* '' */
.icon-lock-open:before { content: '\f513'; } /* '' */
.icon-lock-open-1:before { content: '\e80d'; } /* '' */
.icon-bell:before { content: '\f514'; } /* '' */
.icon-bell-1:before { content: '\e835'; } /* '' */
.icon-bookmark:before { content: '\f516'; } /* '' */
.icon-bookmark-1:before { content: '\e81e'; } /* '' */
.icon-link:before { content: '\f517'; } /* '' */
.icon-link-1:before { content: '\e810'; } /* '' */
.icon-back:before { content: '\f519'; } /* '' */
.icon-fire:before { content: '\f525'; } /* '' */
.icon-flashlight:before { content: '\f526'; } /* '' */
.icon-wrench:before { content: '\f527'; } /* '' */
.icon-hammer:before { content: '\f528'; } /* '' */
.icon-chart-area:before { content: '\f53e'; } /* '' */
.icon-clock:before { content: '\f554'; } /* '' */
.icon-clock-1:before { content: '\e839'; } /* '' */
.icon-rocket:before { content: '\f680'; } /* '' */
.icon-truck:before { content: '\f69a'; } /* '' */
.icon-block:before { content: '\f6ab'; } /* '' */
.icon-block-1:before { content: '\e83a'; } /* '' */
.social-rss:before { font-family: 'fontello'; content: '\e73a'; } /* '' */
.social-delicious:before { content: '\23'; } /* '#' */
.social-500px:before { content: '\30'; } /* '0' */
.social-grooveshark:before { content: '\38'; } /* '8' */
.social-forrst:before { content: '\3a'; } /* ':' */
.social-digg:before { content: '\3b'; } /* ';' */
.social-blogger:before { content: '\42'; } /* 'B' */
.social-klout:before { content: '\4b'; } /* 'K' */
.social-dropbox:before { content: '\64'; } /* 'd' */
.social-ebay:before { content: '\65'; } /* 'e' */
.social-github-1:before { content: '\67'; } /* 'g' */
.social-songkick:before { content: '\6b'; } /* 'k' */
.social-posterous:before { content: '\7e'; } /* '~' */
.social-appnet:before { content: '\e1'; } /* 'á' */
.social-github:before { content: '\f300'; } /* '' */
.social-flickr:before { content: '\f303'; } /* '' */
.social-vimeo:before { content: '\f306'; } /* '' */
.social-twitter:before { content: '\f309'; } /* '' */
.social-facebook:before { content: '\f30c'; } /* '' */
.social-gplus:before { content: '\f30f'; } /* '' */
.social-pinterest:before { content: '\f312'; } /* '' */
.social-youtube:before { content: '\f313'; } /* '' */
.social-tumblr:before { content: '\f315'; } /* '' */
.social-linkedin:before { content: '\f318'; } /* '' */
.social-dribbble:before { content: '\f31b'; } /* '' */
.social-stumbleupon:before { content: '\f31e'; } /* '' */
.social-lastfm:before { content: '\f321'; } /* '' */
.social-spotify:before { content: '\f328'; } /* '' */
.social-instagram:before { content: '\f32d'; } /* '' */
.social-evernote:before { content: '\f333'; } /* '' */
.social-skype:before { content: '\f339'; } /* '' */
.social-paypal:before { content: '\f342'; } /* '' */
.social-picasa:before { content: '\f345'; } /* '' */
.social-soundcloud:before { content: '\f348'; } /* '' */
.social-behance:before { content: '\f34e'; } /* '' */

View File

@@ -0,0 +1,152 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20100429 at Thu Nov 29 11:57:38 2012
By root
Copyright (C) 2012 by original authors @ fontello.com
</metadata>
<defs>
<font id="fontello" horiz-adv-x="1030" >
<font-face
font-family="fontello"
font-weight="500"
font-stretch="normal"
units-per-em="1000"
panose-1="2 0 6 3 0 0 0 0 0 0"
ascent="850"
descent="-150"
bbox="14 -150.125 1410 851.484"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0023-F34E"
/>
<missing-glyph horiz-adv-x="364"
d="M33 0v666h265v-666h-265zM66 33h199v600h-199v-600z" />
<glyph glyph-name=".notdef" horiz-adv-x="364"
d="M33 0v666h265v-666h-265zM66 33h199v600h-199v-600z" />
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="333"
/>
<glyph glyph-name="numbersign" unicode="#" horiz-adv-x="1039"
d="M15 351h501v-501h-501v501zM524 349v501h500v-501h-500z" />
<glyph glyph-name="zero" unicode="0" horiz-adv-x="1292"
d="M621 53q-67 0 -113.5 34.5t-71.5 90.5q-62 -128 -203 -128q-95 0 -157 48q-61 48 -61 138h119q5 -40 29 -64t65 -24q47 0 76 32.5t29 81.5q0 48 -28 79t-75 31q-38 0 -65 -24q-28 -25 -51 -25q-44 0 -80 2l28 161q24 132 29 164h330v-98h-243q-13 -67 -24 -134h3
q15 19 48.5 31t67.5 12q114 0 160 -103q22 57 69.5 92.5t113.5 35.5q44 0 87.5 -18t69.5 -43q24 -23 63 -66q2 -3 6 -7l7 -7q8 10 22 25l18 20q4 5 13.5 14.5t18.5 17.5l24 19q54 44 132 44q89 0 144.5 -60.5t55.5 -151.5q0 -94 -55 -156q-56 -63 -147 -63q-116 0 -226 131
q-71 -71 -81 -78q-4 -3 -17 -11l-21 -14q-44 -29 -109 -29zM530 266q0 -42 25.5 -68t67.5 -26q75 0 155 95l-29 29l-19 20q-9 9 -48 32q-34 20 -63 20q-38 0 -63.5 -31t-25.5 -71zM919 266q30 -32 47 -46.5t48 -31.5q29 -16 61 -16q42 0 67 27.5t25 70.5t-25.5 70.5
t-67.5 27.5q-43 0 -86 -33z" />
<glyph glyph-name="eight" unicode="8"
d="M15 350q0 144 70 256.5t179 176.5q115 67 251 67q144 0 256.5 -70t176.5 -179q67 -115 67 -251q0 -144 -70 -256.5t-179 -176.5q-115 -67 -251 -67q-144 0 -256.5 70t-176.5 179q-67 115 -67 251zM144 350q0 -40 12 -58t41 -23q40 -1 85 40q94 83 68 290q-2 16 -2 17
q-4 8 0 9.5t13 -1.5q95 -25 180 -99q72 -62 167 -193q41 -57 88 -77q56 -19 76 13q20 31 20 82q0 115 -61 208q-49 74 -130.5 121.5t-182.5 47.5q-68 0 -125 -22q-79 -28 -140 -89.5t-89 -141.5q-2 -15 -9 -28q-12 -51 -11 -96z" />
<glyph glyph-name="colon" unicode=":" horiz-adv-x="864"
d="M15 -150l417 1000l417 -1000h-369v135l170 85l-13 55l-157 -79v67l98 52l-14 57l-84 -45v87h-92v-157l-86 59l-16 -64l102 -70v-182h-373z" />
<glyph glyph-name="semicolon" unicode=";" horiz-adv-x="1152"
d="M15 524q0 13 13 13h176v129q0 14 13 14h98v-514q0 -14 -12 -14h-288v372zM191 235q13 0 13 14v206h-67q-13 0 -13 -14v-206h67zM349 524q0 13 13 13h98v-371q0 -14 -12 -14h-99v372zM349 666q0 14 12 14h99v-69q0 -14 -12 -14h-99v69zM498 524q0 13 13 13h288v-504
q0 -13 -13 -13h-288l1 69q0 14 12 14h176v49h-189v372zM675 235q12 0 12 14v206h-67q-12 0 -12 -14v-206h67zM850 103h176v49h-189v372q0 13 13 13h287v-504q0 -13 -12 -13h-288v69q0 14 13 14zM946 235h67q13 0 13 14v206h-67q-13 0 -13 -14v-206z" />
<glyph glyph-name="B" unicode="B" horiz-adv-x="1026"
d="M15 534q0 130 93 223t223 93h221q64 -8 138 -57q74 -50 105 -115q22 -45 29 -108q9 -69 26 -85q13 -13 71 -15t65 -7l14 -11l8 -17l3 -14l-2 -256q-1 -130 -93 -223q-91 -92 -222 -92h-363q-131 0 -223 92q-93 93 -93 223v369zM274 170q0 -25 18 -42.5t43 -17.5h356
q25 0 42.5 17.5t17.5 42.5t-17.5 42.5t-42.5 17.5h-356q-25 0 -43 -17.5t-18 -42.5zM274 532q0 -25 18 -43t43 -18h175q25 0 42.5 18t17.5 43t-17.5 42.5t-42.5 17.5h-175q-25 0 -43 -17.5t-18 -42.5z" />
<glyph glyph-name="K" unicode="K" horiz-adv-x="1116"
d="M15 -150v1000h257v-371h229l103 149l154 222h286l-328 -477q0 -13 96 -143l193 -256l96 -124h-343l-286 400h-200v-400h-257z" />
<glyph glyph-name="d" unicode="d" horiz-adv-x="1054"
d="M15 311l214 163l-214 162l311 203l203 -174l208 174l302 -193l-198 -165l198 -170l-307 -185l-203 156l-203 -156zM228 60v57l94 -55l203 155l1 -1v-355zM233 476l294 -185l296 196l-294 169zM526 -139l1 355l2 1l202 -155l100 60v-63z" />
<glyph glyph-name="e" unicode="e" horiz-adv-x="1425"
d="M506 137q-71 -34 -206 -34q-184 0 -238 51q-27 25 -37 53.5t-10 77.5q0 78 38 113t119 50q54 9 128 9q90 0 148 -13q38 -7 58 -18v-161h-293q0 -74 37 -91q20 -9 50 -9q85 0 85 61h121v-89zM391 319q0 60 -37 72q-20 7 -54 7q-63 0 -77 -30q-10 -22 -10 -49h178zM506 226
h78q-2 -51 -74 -87q-2 -2 -4 -2v89zM808 200q-3 -70 -26 -110t-81 -40q-64 0 -91 50h-1v-42h-103v79q2 0 4 2q72 36 74 87h-78v39h81q1 8 1 23q0 57 -18.5 87.5t-63.5 50.5v183h107v-203h2q32 44 88 44q43 0 69 -26q-40 -28 -40 -102q0 -104 76 -122zM506 426
q45 -20 63.5 -50.5t18.5 -87.5q0 -15 -1 -23h-81v161zM622 146q9 -30 35 -30q28 0 37 30t9 108v5q0 60 -6 89q-7 36 -40 36t-39 -38q-5 -29 -5 -92q0 -78 9 -108zM772 424q17 -19 26 -53t10.5 -55t-0.5 -64v-52q-76 18 -76 122q0 74 40 102zM1041 205q0 6 -2 36t-2 37v102
l-107 218q-45 3 -49 3q-66 0 -101 -26q-40 -25 -40 -94h107q0 32 7.5 46t32.5 14q26 0 35 -13t9 -44v-31h-24q-97 0 -135 -29q17 -19 26 -53q4 -15 6 -25t3 -22t1 -17v-25v-30v-52q5 -1 26 -1q67 0 100 58h2l5 -52h100zM837 327q-11 9 1 20q12 10 5 15q-5 3 0.5 7.5
t11.5 7.5t4 5q-5 2 18 7l7 1l14 2q2 0 17 0.5t16 0.5q0 -6 0.5 -22.5t0.5 -26.5t-1.5 -22.5t-4.5 -19.5q-15 -37 -48 -37q-41 0 -41 62zM904 650h154l100 -232l109 232h143l-189 -359v-190h-141v190l-43 89v91q0 61 -24 90t-83 37zM930 598q59 -8 83 -37t24 -90v-91z" />
<glyph glyph-name="g" unicode="g" horiz-adv-x="969"
d="M227 157q82 0 147.5 -43t65.5 -111q0 -64 -62 -108q-63 -45 -151 -45q-89 0 -150 45q-62 45 -62 108q0 84 100 130q-26 40 -26 75q0 39 28 74q-38 23 -63 62t-25 89q0 73 53.5 125.5t127.5 52.5q55 0 101 -31h7q60 0 109 32v-115q-18 -10 -44 -14q7 -21 7 -50
q0 -70 -50 -121t-119 -55q-24 -29 -24 -53q0 -26 24 -48q1 0 3 0.5t3 0.5zM208 515q-29 0 -50.5 -24.5t-21.5 -55.5t21.5 -55.5t50.5 -24.5q30 0 51 24t21 56t-21 56t-51 24zM227 67q-34 0 -61 -17.5t-27 -46.5q0 -28 27 -46t61 -18t61.5 18t27.5 46q0 29 -27 46.5t-62 17.5
zM470 769q0 34 23.5 57.5t57.5 23.5t58 -23.5t24 -57.5t-24 -58t-58 -24t-57.5 24t-23.5 58zM489 601h134v-479h-134v479zM670 499h55v-285q9 -73 91 -99q15 -5 31 -7h20q22 0 45.5 7t32.5 17l7 9l2 99q-40 -13 -65 -13q-31 0 -36 17l-4 13q0 3 -1 4v238h91v102h-91v93h-123
v-93h-55v-102z" />
<glyph glyph-name="k" unicode="k"
d="M15 283v134l3 59q3 60 6 62q5 4 14 52q9 51 24 56q16 5 36 46q21 42 50 48q146 110 356 110h16v-777h124v208q3 -4 24 -39l40 -64l26 -40q28 -38 60.5 -52t94.5 -14h36v118q-46 0 -63 7q-19 8 -42 41q-16 20 -63 100l171 238h-148l-136 -189v453q135 -23 238 -100
q48 -36 86 -94q16 -25 24 -56q16 -56 18 -93q1 -8 2 -21q3 -44 3 -59v-134l-3 -59q-3 -60 -6 -62q-5 -4 -14 -52q-9 -51 -24 -56q-16 -5 -36 -46q-21 -42 -50 -48q-146 -110 -367 -110t-367 110q-48 36 -86 94q-16 25 -24 56q-16 56 -18 93q-1 8 -2 21q-3 44 -3 59zM96 134
q66 -67 192 -67q80 0 138 41q57 40 57 118q0 46 -16.5 81.5t-46.5 48.5q-55 25 -117 28q-63 4 -63 42q0 47 70 46q56 0 87 -29l78 78q-60 60 -170 60q-78 0 -131 -41q-54 -42 -54 -118q0 -48 19.5 -81.5t52.5 -46.5q38 -14 122 -26q26 -4 36.5 -13t10.5 -31q0 -46 -72 -46
q-77 0 -113 36z" />
<glyph glyph-name="asciitilde" unicode="~" horiz-adv-x="694"
d="M115 835l8 -121h10l5 3q79 133 246 133q130 0 212 -98q83 -100 83 -254q0 -132 -52.5 -221.5t-148.5 -129.5q-57 -23 -116 -23q-71 0 -127 29.5t-85 78.5l-2 3h-11l-3 -7v-378h-113v761q0 87 -6 224h100zM134 422q0 -31 6 -55q18 -66 72 -111t128 -45q106 0 164.5 80
t58.5 201q0 113 -59 191t-159 78q-75 0 -130 -47t-72 -116q-9 -33 -9 -53v-123z" />
<glyph glyph-name="aacute" unicode="&#xe1;" horiz-adv-x="1156"
d="M91 679q51 82 96 114q37 27 110.5 45t135.5 6q51 -9 83 -32q39 -27 63 -57q37 -48 51 -73q44 -81 70 -145q2 -7 13 -31q6 41 57 188q48 141 67 145q91 21 145 0l16 -16q-1 -31 -14 -71q-1 -3 -25 -67l-160 -439q-7 -33 19 -90q26 -56 67 -93q29 -26 53.5 -27t38.5 26
q11 22 28 29.5t57 7.5q54 0 67 -19q28 -52 -1 -100.5t-78 -84.5q-78 -57 -148 -42q-80 16 -129 81q-30 40 -80 127q-3 -1 -6 -4q-24 -58 -82 -106.5t-126 -74.5q-79 -29 -157.5 -19t-137.5 53q-84 60 -131 204q-45 137 -36 300q9 158 74 265zM169 426q-13 -108 9 -211
q23 -104 73 -141q86 -64 157 -32l34 16q9 4 22 14t28 26q5 5 13 14t11 12t8.5 9t7.5 9l8 10l10 14l10 17l22 33l16 30l22 36q-37 157 -64 223q-74 173 -202 155q-56 -8 -80.5 -21t-50.5 -50q-41 -56 -54 -163z" />
<glyph glyph-name="uniF300" unicode="&#xf300;" horiz-adv-x="950"
d="M635 286q28 0 46 -27.5t18 -62.5t-18 -62.5t-46 -27.5q-30 0 -48 27.5t-18 62.5t18 62.5t48 27.5zM475 -40q-8 0 -43.5 1t-42.5 1q-110 0 -180 29q-37 15 -74.5 44.5t-59.5 61.5q-60 84 -60 229q0 114 74 194q-8 5 -1 80t33 140q93 -11 228 -104q47 12 126 12
q84 0 126 -12q63 43 119 68q57 25 83 30l26 6q26 -65 33 -140t-1 -80q74 -80 74 -194q0 -203 -124 -294q-37 -26 -67 -39.5t-76 -21.5q-53 -9 -107 -9q-7 0 -42.5 -1t-43.5 -1zM477 356h-4q-21 0 -85 4.5t-78 4.5q-77 3 -119 -35q-52 -46 -52 -120q0 -124 84 -164
q83 -40 250 -40h4q167 0 251 40q85 40 85 164q0 55 -34 99.5t-85 52.5q-37 6 -113 0q-77 -6 -104 -6zM317 286q28 0 46 -27.5t18 -62.5t-18 -62.5t-46 -27.5q-30 0 -48 27.5t-18 62.5t18 62.5t48 27.5z" />
<glyph glyph-name="uniF303" unicode="&#xf303;" horiz-adv-x="930"
d="M211 550q82 0 139 -58.5t57 -141.5t-58 -141q-59 -59 -138 -59t-138 59q-58 58 -58 141t57 141.5t139 58.5zM719 150q-79 0 -138 59q-58 58 -58 141t57 141.5t139 58.5t139 -58.5t57 -141.5t-58 -141q-59 -59 -138 -59z" />
<glyph glyph-name="uniF306" unicode="&#xf306;" horiz-adv-x="931"
d="M911 558q-31 -186 -171 -351q-141 -167 -245 -237q-33 -19 -61.5 -19.5t-54.5 16.5t-44.5 39t-29.5 46q-14 28 -78.5 238.5t-73.5 223.5q-27 20 -82 -16l-20 -14l-36 50q6 6 21 24l25 28q31 35 100 89q71 56 124 67q58 12 89 -42q25 -40 38 -130q21 -126 25 -142
q28 -106 38 -134q11 -28 18 -39q8 -11 18 -11q41 0 126 166q42 76 6 124t-112 2q23 127 140 188q104 54 182 8q80 -47 58 -174z" />
<glyph glyph-name="uniF309" unicode="&#xf309;" horiz-adv-x="950"
d="M935 636q-37 -56 -94 -98v-24q0 -130 -60 -250q-60 -121 -186 -203q-127 -83 -290 -83q-159 0 -290 84q18 -2 46 -2q131 0 234 80q-64 2 -111.5 39t-64.5 93q9 -4 34 -4q26 0 50 6q-63 13 -106.5 64.5t-43.5 121.5v2q36 -20 84 -24q-84 58 -84 158q0 47 26 94
q155 -189 390 -196q-6 18 -6 42q0 78 55.5 133t134.5 55q82 0 136 -58q58 12 120 44q-19 -66 -82 -104q55 8 108 30z" />
<glyph glyph-name="uniF30C" unicode="&#xf30c;" horiz-adv-x="530"
d="M515 644h-142q-16 0 -26 -16.5t-10 -35.5v-102h178v-148h-178v-442h-170v442h-152v148h152v86q0 92 58.5 158t147.5 66h142v-156z" />
<glyph glyph-name="uniF30F" unicode="&#xf30f;" horiz-adv-x="926"
d="M291 282q-32 45 -32 86l2 14h-14q-63 0 -110 30q-74 44 -74 160q0 53 23.5 98.5t57.5 68.5q75 51 151 51h230v-4q0 -22 -78 -36q-27 0 -38 -6q39 -20 53.5 -54.5t14.5 -97.5q0 -102 -68 -158q-38 -38 -38 -54q0 -17 50 -64q104 -90 104 -178q0 -140 -116 -194
q-67 -34 -150 -34h-4l-4 2q-2 -2 -4 -2q-57 0 -129 26q-47 16 -75 58t-28 102t32 101t83 57q89 28 159 28h2zM271 236q-59 -2 -109.5 -43t-46.5 -97q4 -54 58 -82t119.5 -22t103.5 40q41 37 37 88q-4 54 -44 85t-102 31h-16zM251 728q-10 0 -20 -2q-40 -12 -58 -62
q-15 -59 -1 -109t46 -82q33 -33 71 -33q10 0 18 2q42 12 63 66t3 112q-30 108 -122 108zM761 446h150v-94h-150v-150h-94v150h-150v94h150v150h94v-150z" />
<glyph glyph-name="uniF312" unicode="&#xf312;" horiz-adv-x="808"
d="M335 190q-24 -124 -58 -211q-31 -81 -96 -129q-10 120 -5 167q2 28 9 63q18 96 48 203q17 59 24 99q-24 51 -19 116q5 61 47 105t100 21q72 -28 31 -154q-27 -85 -32 -103q-15 -50 -4 -90q10 -38 63 -49q72 -15 123.5 39.5t71.5 129.5q21 81 11 163q-11 85 -54 128
q-61 64 -151 70q-96 6 -168 -35.5t-115 -114.5q-46 -77 -32 -170q5 -23 22 -52q21 -36 22 -51.5t-18 -62.5q-146 35 -140 230q5 138 105 234q100 95 233 112q164 18 290 -57t144 -219q26 -176 -66 -317q-91 -141 -252 -129q-23 2 -42 9t-30 13.5t-31 20.5q-23 16 -31 21z
" />
<glyph glyph-name="uniF313" unicode="&#xf313;" horiz-adv-x="793"
d="M673 468h-57v32q-35 -35 -67 -35q-41 0 -41 50v235h58v-216q0 -19 15.5 -19t34.5 22v213h57v-282zM379 757q35 0 58 -19.5t23 -53.5v-145q0 -37 -22.5 -57.5t-61.5 -20.5q-37 0 -60 21.5t-23 57.5v145q0 35 24.5 53.5t61.5 18.5zM376 709q-9 0 -16 -6t-7 -15v-154
q0 -23 23 -23q25 0 25 23v154q0 8 -8 14.5t-17 6.5zM230 850h66l-49 -148q-1 -2 -11.5 -31t-14.5 -44v-159h-64v152q-1 8 -27 76l-51 154h66l41 -152h5zM775 54q-4 -43 -34.5 -70.5t-76.5 -29.5q-99 -4 -267 -4q-170 0 -267 4q-46 2 -77 29.5t-34 70.5q-5 87 -5 131t5 130
q3 44 34 71.5t77 28.5q97 5 267 5t267 -5q46 -1 76.5 -28.5t34.5 -71.5q5 -86 5 -130t-5 -131zM580 103q0 -32 17.5 -51.5t49.5 -19.5q69 0 69 71v17h-47v-10v-10q0 -3 -0.5 -8.5t-2 -8t-3.5 -5.5t-6 -4.5t-9 -1.5q-20 0 -20 32v43h88v58q0 31 -17 49t-48 18t-51 -19
t-20 -48v-102zM544 212q0 57 -44 57q-23 0 -42 -21v99h-47v-309h47v18q21 -20 44 -20q42 0 42 50v126zM365 38v228h-45v-173q-15 -17 -28 -17q-12 0 -12 15v175h-47v-192q0 -39 33 -39q26 0 54 28v-25h45zM234 302v45h-161v-45h54v-264h52v264h55zM669 182h-41v25
q0 25 21 25q20 0 20 -25v-25zM497 210v-120q0 -18 -16 -18q-13 0 -23 9v143q9 9 20 9q19 0 19 -23z" />
<glyph glyph-name="uniF315" unicode="&#xf315;" horiz-adv-x="590"
d="M575 -58q-97 -52 -208 -52q-59 0 -110 16q-51 19 -82 46q-35 30 -46 64q-14 31 -14 96v322h-100v130q107 36 154 130q24 53 30 116h130v-232h216v-144h-216v-236q0 -83 8 -102q11 -25 32 -36q29 -20 68 -20q68 0 138 46v-144z" />
<glyph glyph-name="uniF318" unicode="&#xf318;" horiz-adv-x="930"
d="M219 698q0 -42 -30 -69t-74 -27q-42 0 -71 27.5t-29 68.5q0 43 28.5 69.5t73.5 26.5t72.5 -26.5t29.5 -69.5zM21 526h192v-618h-192v618zM327 328q0 98 -4 198h166l10 -86h4q60 100 190 100q108 0 165 -72t57 -194v-366h-192v342q0 134 -98 134q-69 0 -98 -72
q-6 -12 -6 -48v-356h-194v420z" />
<glyph glyph-name="uniF31B" unicode="&#xf31b;" horiz-adv-x="950"
d="M453 480q-48 85 -122 193q-19 29 -24 33q-80 -39 -137.5 -111t-78.5 -163q182 0 362 48zM517 352q-11 31 -32 68q-183 -56 -402 -56v-14q0 -150 100 -262q9 15 13 21q42 62 103 119q37 35 94 68.5t110 51.5q7 4 14 4zM233 42l-8 6q6 -6 8 -6zM381 732zM735 646
q-115 98 -260 98q-49 0 -92 -12q79 -104 146 -228q139 53 204 140zM150 25q-135 135 -135 325t135 325t325 135t325 -135t135 -325t-135 -325t-325 -135t-325 135zM543 286q-216 -74 -308 -242l-2 -2q109 -84 242 -84q76 0 154 32q-24 141 -84 298zM585 388l10 -20
q110 13 230 -6q35 -6 42 -8q0 139 -88 246l-8 -10q-18 -23 -68 -63q-64 -50 -144 -83q14 -28 26 -56zM619 306q52 -146 76 -280q139 91 168 262q-5 3 -39 11q-104 24 -205 7z" />
<glyph glyph-name="uniF31E" unicode="&#xf31e;"
d="M239 142q19 0 35.5 16t16.5 36v314q0 92 66 157q67 65 158 65t158 -65q66 -65 66 -157v-60l-102 -34l-70 34v60q0 22 -15 37t-37 15q-20 0 -36 -15.5t-16 -36.5v-314q0 -92 -66 -158t-158 -66t-158 66t-66 158v132h172v-132q0 -20 16.5 -36t35.5 -16zM845 326h170v-132
q0 -92 -66 -158t-158 -66t-158 66t-66 158v134l70 -32l102 32v-134q0 -20 16.5 -36t35.5 -16q22 0 38 15t16 37v132z" />
<glyph glyph-name="uniF321" unicode="&#xf321;"
d="M409 222l34 -100q-64 -52 -168 -52q-107 0 -183 73q-77 74 -77 199q0 129 80 209q79 79 188 79q111 0 167 -45q55 -44 91 -159l36 -116q48 -146 202 -146q120 0 120 60q0 54 -78 72l-78 18q-134 35 -134 152q0 89 58 126q59 38 146 38q184 0 198 -146l-114 -14
q-7 70 -90 70q-82 0 -82 -62q0 -50 66 -66l74 -16q150 -36 150 -166q0 -160 -238 -160q-136 0 -204 53q-69 53 -100 149l-36 116q-4 10 -9 25.5t-7.5 22.5t-7 17t-10 18.5t-13.5 19.5q-32 43 -103 43q-64 0 -113 -46t-49 -142q0 -81 46 -130q47 -50 110 -50q60 0 128 56z
" />
<glyph glyph-name="uniF328" unicode="&#xf328;" horiz-adv-x="990"
d="M834 690q141 -140 141 -340q0 -126 -58.5 -229t-149.5 -165q-108 186 -338 192q-176 6 -296 -114q-118 137 -118 316q0 200 140 340t340 140q197 0 339 -140zM719 220q-188 114 -460 54q-30 -7 -22 -36q7 -30 36 -22q245 58 416 -46q26 -14 40 10q14 26 -10 40zM775 366
q-103 64 -245 83.5t-287 -19.5q-34 -10 -24 -46q10 -33 46 -26q111 34 244 19t228 -73q32 -20 50 12q18 34 -12 50zM853 472q20 38 -16 62q-127 74 -314 89t-306 -27q-16 -3 -26.5 -19.5t-3.5 -34.5q6 -17 21 -26.5t35 -3.5q103 36 271 23q171 -14 277 -77q38 -24 62 14z
M427 4q131 -5 186 -118q-58 -16 -118 -16q-125 0 -234 62q66 73 166 72z" />
<glyph glyph-name="uniF32D" unicode="&#xf32d;" horiz-adv-x="890"
d="M149 -80q-55 0 -94.5 40t-39.5 96v344h174q-4 -28 -4 -50q0 -107 76 -183q77 -77 184 -77q106 0 183 77t77 183q0 26 -6 50h176v-344q0 -56 -39.5 -96t-94.5 -40h-592zM741 780q55 0 94.5 -39t39.5 -95v-146h-218q-78 110 -212 110q-138 0 -212 -110h-218v146
q0 56 39.5 95t94.5 39h592zM685 614q0 -9 7.5 -16.5t16.5 -7.5h72q24 0 24 24v72q0 24 -24 24h-72q-24 0 -24 -24v-72zM605 350q0 -65 -47.5 -112.5t-112.5 -47.5t-112.5 47.5t-47.5 112.5q0 67 47 113.5t113 46.5t113 -46.5t47 -113.5z" />
<glyph glyph-name="uniF333" unicode="&#xf333;" horiz-adv-x="796"
d="M677 700q31 0 59.5 -18t28.5 -46q0 -1 0.5 -9t2 -26.5t2.5 -37.5q14 -188 8 -315q-5 -106 -19.5 -176.5t-50.5 -120.5q-38 -51 -91 -51q-153 0 -194 26q-26 20 -18 130q1 39 37 59q34 19 69 19l34 -2l-4 -70q-16 -2 -38 -2q-19 0 -24 -26q-4 -37 40 -42l86 4q38 5 28 136
q-4 30 -52 39q-69 10 -96 17q-45 13 -73 65q-9 17 -11 17t-8 -58t-30 -58q-45 0 -139 15q-95 15 -115 35q-33 34 -62 149q-28 113 -28 151q0 34 58 30h116q78 0 78 72q0 8 -1 55.5t-1 56.5q0 82 40 82q89 0 120 -14q16 -7 28 -24t14 -36l4 -14zM667 366q-8 28 -29.5 53
t-48.5 25q-26 0 -44 -21.5t-22 -47.5q-5 -23 0 -29q5 -4 9.5 -5t7.5 -0.5t11 2.5t13 3q17 4 31 4q17 0 59 -16q10 -4 15 0q6 6 -2 32zM187 642q0 -22 -28 -22h-144l176 172q-4 -123 -4 -150z" />
<glyph glyph-name="uniF339" unicode="&#xf339;" horiz-adv-x="950"
d="M935 132q0 -108 -75 -185t-179 -77q-61 0 -120 32q-56 -8 -80 -8q-182 0 -311 132t-129 320q0 46 10 90q-36 60 -36 134q0 107 74 184q73 76 180 76q75 0 136 -40q34 8 76 8q183 0 310 -132q128 -133 128 -320q0 -49 -10 -96q26 -60 26 -118zM705 130q30 46 30 100
q0 45 -16 80q-17 31 -50 54q-37 23 -76 36q-74 21 -96 26q-97 14 -122 50q-10 10 -10 26q0 24 28 42q26 20 76 20t74 -18q27 -24 38 -50q18 -28 26 -36q17 -12 38 -12q26 0 45 19t19 45q0 19 -14 52q-17 24 -42 48q-27 21 -74 38q-50 14 -102 14q-74 0 -128 -22
q-52 -19 -84 -57t-32 -95q0 -53 28 -90q33 -39 76 -56q48 -22 116 -36q9 -2 80 -20q29 -10 46 -28q18 -14 18 -42q0 -38 -37 -59t-85 -21q-72 0 -100 40q-25 45 -26 46q-7 23 -24 40q-20 14 -40 14q-26 0 -45 -17.5t-19 -42.5q0 -45 30 -85t70 -63q64 -34 158 -34
q78 0 138 24q60 28 88 70z" />
<glyph glyph-name="uniF342" unicode="&#xf342;" horiz-adv-x="889"
d="M786 610q88 -43 88 -162q0 -130 -110 -210q-107 -80 -306 -80h-30q-17 0 -32.5 -12.5t-19.5 -27.5l-36 -156q-12 -42 -52 -42h-106q-17 0 -27.5 12.5t-6.5 29.5l6 24h68q17 0 32.5 13.5t19.5 28.5l36 156q10 40 52 40h30q196 0 306 80q110 83 110 210q0 56 -22 96z
M206 94q-2 -15 -18 -28.5t-32 -13.5h-108q-17 0 -26.5 12.5t-5.5 29.5l150 646q10 40 52 40h224q75 0 126 -8q58 -13 94 -34q35 -23 58 -62q20 -38 20 -96q0 -130 -110 -210q-107 -80 -304 -80h-32q-16 0 -32 -12.5t-18 -27.5zM294 468q-4 -16 6.5 -28t25.5 -12h28
q86 0 134 36q48 34 48 98q0 47 -32 65.5t-92 18.5h-34q-42 0 -52 -40z" />
<glyph glyph-name="uniF345" unicode="&#xf345;" horiz-adv-x="950"
d="M423 616l-396 -362q-12 48 -12 96q0 138 70.5 246t179.5 164q14 -16 158 -144zM665 492l-328 296q63 22 138 22q100 0 190 -40v-278zM735 730q88 -60 144 -159t56 -221q0 -79 -26 -152h-174v532zM115 240l102 92v-362q-115 80 -168 210q12 12 66 60zM287 -70v198h590
q-53 -96 -147.5 -161t-212.5 -77h-84q-86 11 -146 40z" />
<glyph glyph-name="uniF348" unicode="&#xf348;"
d="M49 178q0 -4 -10 -4q-6 0 -10 4l-14 70l14 72q4 4 10 4q10 0 10 -4l16 -72zM151 140q0 -8 -12 -8t-12 8l-12 108l12 166q0 8 12 8t12 -8l14 -166zM253 142q0 -10 -14 -10t-14 8l-10 108l10 222q0 10 14 10t14 -10l12 -222zM355 142q0 -10 -16 -10t-16 10l-8 106l8 224
q0 10 16 10t16 -10l10 -224zM457 144q0 -12 -18 -12q-17 0 -18 12l-6 104l6 256q5 14 18 14q18 0 18 -14l8 -256zM529 132q-14 0 -14 14v396q0 10 12 14q37 14 84 14q88 0 153 -58.5t73 -141.5q23 10 50 10q51 0 89.5 -37t38.5 -87q0 -52 -38 -89t-90 -37z" />
<glyph glyph-name="uniF34E" unicode="&#xf34e;"
d="M337 680q81 0 128.5 -45.5t47.5 -126.5q0 -42 -20 -76.5t-50 -41.5l-24 -4q57 0 85 -40q30 -42 31 -80v-40q0 -52 -19 -93.5t-51 -60.5q-53 -32 -108 -38h-342v646h322zM327 422q31 0 42.5 18t11.5 58q0 24 -9 43.5t-25 22.5l-10 2h-180v-144h170zM403 234q0 40 -16 62
q-17 23 -32 24l-18 2h-180v-172h172q74 0 74 84zM797 516q65 0 114.5 -27.5t70.5 -71.5q38 -82 33 -151l-2 -30h-320q0 -54 27 -82t55 -28l26 -2q45 0 71 17t27 33l2 18h108q0 -82 -53 -124q-53 -43 -105 -44l-54 -2q-66 0 -118 23.5t-76 63.5q-44 72 -44 133v26q0 37 15 87
t39 79.5t69 54.5q50 27 115 27zM895 322q0 32 -20 65q-9 15 -30 25t-44 10q-42 0 -70 -25t-34 -51l-6 -24h204zM921 642v-78h-256v78h256z" />
</font>
</defs></svg>

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Some files were not shown because too many files have changed in this diff Show More