jQuery+CSS3全屏垂直翻页代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3全屏垂直翻页代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html class="fsvs demo" lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>jQuery+CSS3全屏垂直翻页代码</title>
        <link rel="stylesheet" href="assets/css/style.css">
        
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
        <script src="assets/js/jquery.swipe-events.js"></script>
        <script src="assets/js/prismjs.js"></script>
        <script src="assets/js/fsvs.js"></script>
        <script src="assets/js/main.js"></script>
    </head>
    <body>
        <div id="fsvs-body">
            <div class="slide" id="fsvs-initial-setup">
                <div>
                    <pre><code class="language-javascript">
$(document).ready( function() {
    // The HTML tag must have a class of fsvs
    var fsvs = $.fn.fsvs({
        speed : 1000
    });
});
                    </code></pre>
                </div>
            </div>
            <div class="slide" id="basic-html-setup">
                <h2>Basic HTML setup</h2>
                <div>
                    <pre><code class="language-php">
&lt;!doctype html&gt;
&lt;html class="fsvs" lang="en"&gt;
    &lt;body&gt;
        &lt;div id="fsvs-body"&gt;
            &lt;div class="slide"&gt;&lt;/div&gt;
            &lt;div class="slide"&gt;&lt;/div&gt;
            &lt;div class="slide"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
                    </code></pre>
                </div>

            </div>
            <div class="slide">
                <h2>Default Options</h2>
    <pre><code class="language-javascript">
$(document).ready( function() {
    var fsvs = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
});
    </code></pre>
            </div>
            <div class="slide">
                <h2>Load In New Slides On End</h2>
    <pre><code class="language-javascript">
$(document).ready( function() {
    var slider = $.fn.fsvs({
        ...
        endSlide : function(index) {
            $('&lt;div class="slide"&gt;&lt;h2&gt;Slide ' + (index+2) + '&lt;/h2&gt;&lt;/div&gt;').appendTo( $('body') );
            // reset the nth classes if you need it
            slider.nthClasses(3);
            // rebind pagination if you need it
            slider.addPagination();
        }
        ...
    });
});
</code></pre>
            </div>
        </div>
</body>
</html>

JS代码(fsvs.js):

/*!*FSVS - Full Screen Vertical Scroller*https://github.com/lukesnowden/FSVS*Copyright 2014 Luke Snowden*Released under the MIT license:*http://www.opensource.org/licenses/mit-license.php*/
;
	( function($){
	$.fn.fsvs = function( options ){
	options = options ||{
}
;
	/** * [defaults description] * @type{
	Object}
*/
var defaults ={
	speed:5000,bodyID:'fsvs-body',selector:'> .slide',mouseSwipeDisance:40,afterSlide:function(){
}
,beforeSlide:function(){
}
,endSlide:function(){
}
,mouseWheelEvents:true,mouseWheelDelay:false,scrollabelArea:'scrollable',mouseDragEvents:true,touchEvents:true,arrowKeyEvents:true,pagination:true,nthClasses:false,detectHash:true}
;
	for( var i in options ){
	defaults[i] = options[i];
}
options = defaults;
	/** * [currentSlideIndex description] * @type{
	Number}
*/
var currentSlideIndex = 0;
	/** * [ignoreHashChange description] * @type{
	Boolean}
*/
var ignoreHashChange = false;
	/** * [bodyTimeout description] * @type{
	[type]}
*/
var bodyTimeout = null;
	/** * [body description] * @type{
	[type]}
*/
var body = null;
	/** * [scrolling description] * @type{
	Boolean}
*/
var scrolling = false;
	/** * [mouseWheelTimer description] * @type{
	Boolean}
*/
var mouseWheelTimer = false;
	/** * [mouseWheelScrollStart description] * Indicates when the mouseWheel last invoked a slide event. * @type{
	Integer}
*/
var mouseWheelScrollStart = 0;
	/** * [pagination description] * @type{
	Boolean}
*/
var pagination = false;
	/** * [isChrome description] * @reference http://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome * @return{
	Boolean}
[description] */
var isChrome = function(){
	var isChromium = window.chrome,vendorName = window.navigator.vendor;
	if( isChromium !== null && vendorName === "Google Inc." ){
	return true;
}
return false;
}
;
	/** * [changeViaHash description] * @return{
	[type]}
[description] */
var changeViaHash = function(){
	if( ! ignoreHashChange ){
	if( window.location.hash !== '' ){
	var slideID = window.location.hash;
	var slideTo = $( '> ' + slideID,body );
	app.slideToIndex( slideTo.index() );
}
}
ignoreHashChange = false;
}
;
	/** * [detectHash description] * @return{
	[type]}
[description] */
var detectHash = function(){
	$( options.selector,body ).each( function( i ){
	var slide = $(this);
	if( ! slide.attr( 'id' ) ){
	slide.attr( 'id','slide-' + (i+1) );
}
}
);
	changeViaHash();
}
;
	/** * [hasTransition description] * @return{
	Boolean}
[description] */
var hasTransition = function(){
	prefixes = ['Webkit','Moz','ms','O'];
	for( var i in prefixes ){
	if( typeof document.getElementsByTagName( 'body' )[0].style[prefixes[i] + 'Transition' ] !== 'undefined' ){
	return true;
}
}
return false;
}
/** * [bindMouseDrag description] * @return{
	[type]}
[description] */
var bindMouseDrag = function(){
	var x,y;
	window.onmousedown = function(e){
	y = e.y;
}
window.onmouseup = function(e){
	if( e.y > ( y+options.mouseSwipeDisance ) ){
	app.slideUp();
}
else if( e.y < ( y-options.mouseSwipeDisance ) ){
	app.slideDown();
}
}
}
;
	/** * [unBindMouseDrag description] * @return{
	[type]}
[description] */
var unBindMouseDrag = function(){
	window.onmousedown = function(){
}
;
	window.onmouseup = function(){
}
;
}
/** * [bindTouchSwipe description] * @return{
	[type]}
[description] */
var bindTouchSwipe = function(){
	var startY = null;
	$(window).on( "touchstart.fsvs",function(ev){
	var e = ev.originalEvent;
	var cancelOn = ['a','input','textarea','select'];
	if( $.inArray( e.target.nodeName.toLowerCase(),cancelOn ) == -1 ){
	var touches = e.touches;
	if( touches && touches.length ){
	startY = touches[0].pageY;
}
e.preventDefault();
}
}
);
	$(window).on( "touchmove.fsvs",function(ev){
	var e = ev.originalEvent;
	if( startY !== null ){
	var touches = e.touches;
	if( touches && touches.length ){
	var deltaY = startY - touches[0].pageY;
	if ( deltaY >= options.mouseSwipeDisance ){
	app.slideDown();
	startY = null;
}
if ( deltaY <= ( options.mouseSwipeDisance * -1 ) ){
	app.slideUp();
	startY = null;
}
}
e.preventDefault();
}
}
);
}
;
	/** * [unbindTouchSwipe description] * @return{
	[type]}
[description] */
var unbindTouchSwipe = function(){
	$(window).unbind( "touchstart.fsvs" );
	$(window).unbind( "touchmove.fsvs" );
}
;
	/** * [mouseWheelHandler description] * @param{
	[type]}
e [description] * @return{
	[type]}
[description] */
var mouseWheelHandler = function( ev ){
	var e = window.event || ev;
	var wheely = ( e.wheelDelta || -e.detail || e.originalEvent.detail );
	var delta = Math.max( -1,Math.min( 1,wheely ) );
	if( isChrome() ){
	// chrome seems to extends its "wheely" motionwheely = Math.floor( wheely / 5 );
}
if( ( ! scrolling || ( options.mouseWheelDelay && Date.now() > mouseWheelScrollStart + options.mouseWheelDelay ) ) && Math.abs( wheely ) > 5 ){
	mouseWheelScrollStart = Date.now();
	scrolling = true;
	var allowToRun = true;
	var target = $(ev.target);
	if( target.hasClass( options.scrollabelArea ) || target.parents( '.' + options.scrollabelArea ).length !== 0 ){
	allowToRun = false;
	var scrollableArea = target.closest('.' + options.scrollabelArea);
	if( target.hasClass( options.scrollabelArea ) ) scrollableArea = target;
	if( isScrollingUp(ev) && scrollableArea.scrollTop() === 0 ){
	allowToRun = true;
}
else if( scrollableArea[0].scrollHeight - scrollableArea.scrollTop() === scrollableArea.outerHeight() ){
	allowToRun = true;
}
}
if( allowToRun ){
	if( isScrollingUp(ev) ){
	app.slideUp();
}
else{
	app.slideDown();
}
}
else{
	scrolling = false;
}
}
}
;
	/** * [isScrollingUp description] * @param{
	[type]}
ev [description] * @return{
	Boolean}
[description] */
var isScrollingUp = function(ev){
	var e = window.event || ev;
	var wheely = ( e.wheelDelta || -e.detail || e.originalEvent.detail );
	var delta = Math.max( -1,Math.min( 1,wheely ) );
	if( isChrome() ) wheely = Math.floor( wheely / 5 );
	if( e.originalEvent && e.originalEvent.detail ){
	if( delta > 0 ){
	return false;
}
}
else if( delta < 0 ){
	return false;
}
return true;
}
/** * [bindMouseWheelEvent description] * @return{
	[type]}
[description] */
var bindMouseWheelEvent = function(){
	$(window).bind('wheel.fsvs mousewheel.fsvs DOMMouseScroll.fsvs MozMousePixelScroll.fsvs',mouseWheelHandler );
}
;
	/** * [unBindMouseWheelEvent description] * @return{
	[type]}
[description] */
var unBindMouseWheelEvent = function(){
	$(window).unbind('wheel.fsvs mousewheel.fsvs DOMMouseScroll.fsvs MozMousePixelScroll.fsvs',mouseWheelHandler );
}
;
	/** * [bindKeyArrows description] * @return{
	[type]}
[description] */
var bindKeyArrows = function(){
	allow = true;
	$('input,textarea,select,option',body).bind( 'focus.fsvs',function(){
	allow = false;
}
).bind( 'blur.fsvs',function(){
	allow = true;
}
);
	window.onkeydown = function(e){
	e = e || window.event;
	if ( e.keyCode == '38' && allow ) app.slideUp();
	else if ( e.keyCode == '40' && allow ) app.slideDown();
}
}
;
	/** * [unbindKeyArrows description] * @return{
	[type]}
[description] */
var unbindKeyArrows = function(){
	$('input,textarea,select,option',body).unbind('focus.fsvs blur.fsvs');
	window.onkeydown = function(){
}
;
}
;
	/** * [slideCallback description] * @param{
	[type]}
index [description] * @return{
	[type]}
[description] */
var slideCallback = function( index ){
	currentSlideIndex = index;
	options.afterSlide( index );
	if( options.detectHash ){
	var slide = $( options.selector,body ).eq( index );
	window.location.hash = slide[0].id;
}
if( ! app.canSlideDown() ){
	options.endSlide( index );
}
scrolling = false;
}
;
	/** * [nthClasses description] * @param{
	[type]}
nthClassLimit [description] * @return{
	[type]}
[description] */
var nthClasses = function( nthClassLimit ){
	$( options.selector,body ).each( function( i ){
	var nthClass = 'nth-class-' + ((i%nthClassLimit)+1);
	if( ! $(this).hasClass( nthClass ) ){
	$(this).addClass( nthClass );
}
}
);
}
;
	/** * [jQuerySlide description] * @param{
	[type]}
index [description] * @return{
	[type]}
[description] */
var jQuerySlide = function( index ){
	options.beforeSlide( index );
	if( body.is( ':animated' ) ){
	currentSlideIndex = index;
	body.stop();
}
body.animate({
	top:'-' + (index*$(window).height()) + 'px'}
,options.speed,function(){
	slideCallback( index );
}
);
}
;
	/** * [cssSlide description] * @param{
	[type]}
index [description] * @return{
	[type]}
[description] */
var cssSlide = function( index ){
	options.beforeSlide( index );
	body.css({
	'-webkit-transform':'translate3d(0,-' + (index*100) + '%,0)','-moz-transform':'translate3d(0,-' + (index*100) + '%,0)','-ms-transform':'translate3d(0,-' + (index*100) + '%,0)','transform':'translate3d(0,-' + (index*100) + '%,0)'}
);
	if( bodyTimeout !== null ){
	currentSlideIndex = index;
	clearTimeout( bodyTimeout );
}
bodyTimeout = setTimeout( function(){
	slideCallback( index );
	bodyTimeout = null;
}
,options.speed );
}
/** * [removeStyling description] * @return{
	[type]}
[description] */
var removeStyling = function(){
	body.attr('style','');
	$('> div',body).each(function(i){
	$(this).attr('class','slide' );
}
);
	$('body').attr('class','');
	$('#fsvs-pagination').remove();
}
;
	/** * [app description] * @type{
	Object}
*/
var app ={
	nthClasses:nthClasses,/** * [addPagination description] */
addPagination:function(){
	pagination = $('<ul id="fsvs-pagination"></ul>');
	$( options.selector,body ).each( function(i){
	var linkClass = currentSlideIndex === i ? 'pagination-link active':'pagination-link';
	$('<li class="' + linkClass + '"><span><span></span></span></li>').appendTo( pagination );
}
);
	if( $('#fsvs-pagination').length !== 0 ){
	$('#fsvs-pagination').remove();
}
pagination.appendTo( $('body') );
	var paginationHeight = pagination.height();
	var speed = options.speed/1000;
	$('span',pagination).css({
	'-webkit-transition':'all ' + speed + 's','-moz-transition':'all ' + speed + 's','-o-transition':'all ' + speed + 's','transition':'all ' + speed + 's'}
);
	pagination.css({
	marginTop:'-' + (paginationHeight/2) + 'px',right:'25px'}
);
	$('li',pagination).bind( 'click.fsvs',function(e){
	ignoreHashChange = true;
	$('.active',pagination).removeClass( 'active' );
	$(this).addClass( 'active' );
	app.slideToIndex( $(this).index(),e );
}
);
}
,/** * [setSpeed description] * @param{
	[type]}
_speed [description] */
setSpeed:function( _speed ){
	speed = _speed/1000;
	body.css({
	'-webkit-transition':'all ' + speed + 's','-moz-transition':'all ' + speed + 's','-o-transition':'all ' + speed + 's','transition':'all ' + speed + 's'}
);
}
,/** * [shouldRun description] * @return{
	[type]}
[description] */
shouldRun:function(){
	return $('html').hasClass( 'fsvs' );
}
,/** * [canSlideUp description] * @return{
	[type]}
[description] */
canSlideUp:function(){
	if( currentSlideIndex === 0 ) return false;
	return true;
}
,/** * [canSlideDown description] * @return{
	[type]}
[description] */
canSlideDown:function(){
	if( $( options.selector,body ).eq( (currentSlideIndex+1) ).length === 0 ) return false;
	return true;
}
,/** * [addClasses description] * @param{
	[type]}
before [description] * @param{
	[type]}
after [description] */
addClasses:function( before,after ){
	var _body = $('body');
	_body.removeClass( removeClass = 'active-slide-' + (before+1) );
	_body.addClass( 'active-slide-' + (after+1) );
	$( options.selector,body ).eq( before ).removeClass( 'active-slide' );
	$( options.selector,body ).eq( after ).addClass( 'active-slide' );
	if( options.nthClasses ){
	_body.removeClass( 'active-nth-slide-' + (( before % options.nthClasses )+1) );
	_body.addClass( 'active-nth-slide-' + (( after % options.nthClasses )+1) );
}
}
,/** * [slideToIndex description] * @param{
	[type]}
index [description] * @return{
	[type]}
[description] */
slideToIndex:function( index,e ){
	var e = e || false;
	if( ! e && pagination ){
	$('.active',pagination).removeClass( 'active' );
	$('> *',pagination).eq(index).addClass( 'active' );
}
app.addClasses( currentSlideIndex,index );
	if( hasTransition() ){
	cssSlide( index );
}
else{
	jQuerySlide( index );
}
}
,/** * [unbind description] * @return{
	[type]}
[description] */
unbind:function(){
	unBindMouseDrag();
	unBindMouseWheelEvent();
	unbindKeyArrows();
	unbindTouchSwipe();
	removeStyling();
	$('html').removeClass('fsvs');
}
,/** * [rebind description] * @return{
	[type]}
[description] */
rebind:function(){
	$('html').addClass('fsvs');
	app.init();
}
,/** * [slideDown description] * @return{
	[type]}
[description] */
slideDown:function(e){
	if( app.canSlideDown() ){
	ignoreHashChange = true;
	app.slideToIndex( (currentSlideIndex+1),e );
}
else{
	scrolling = false;
}
}
,/** * [slideUp description] * @return{
	[type]}
[description] */
slideUp:function(e){
	if( app.canSlideUp() ){
	ignoreHashChange = true;
	app.slideToIndex( (currentSlideIndex-1),e );
}
else{
	scrolling = false;
}
}
,/** * [init description] * @return{
	[type]}
[description] */
init:function(){
	body = $( '#' + options.bodyID );
	if( hasTransition() ){
	app.setSpeed( options.speed );
}
if( options.pagination ){
	app.addPagination();
}
if( options.nthClasses ){
	nthClasses( options.nthClasses );
}
if( options.mouseWheelEvents ){
	bindMouseWheelEvent();
}
if( options.arrowKeyEvents ){
	bindKeyArrows();
}
if( options.mouseDragEvents ){
	bindMouseDrag();
}
if( options.touchEvents ){
	bindTouchSwipe();
}
if( options.detectHash ){
	detectHash();
	if( window.addEventListener ){
	window.addEventListener( "hashchange",changeViaHash,false );
}
else if (window.attachEvent){
	window.attachEvent( "onhashchange",changeViaHash );
}
$('body').attr('class',' ');
}
app.addClasses( 0,0 );
}
}
;
	if( app.shouldRun() ){
	app.init();
}
return app;
}
;
}
)( jQuery );

JS代码(main.js):

jQuery(document).ready( function($){
	if( $.fn.fsvs ){
	var slider = $.fn.fsvs({
	speed:1000,nthClasses:4,mouseDragEvents:false}
);
}
if( $.fn.flare ){
	var flares = $('.flare').flare();
	for( var flare in flares ){
	//flares[flare].reset();
}
}
var sectionHeight = $('#fsvs-body > .slide:eq(0)').height();
	$('#fsvs-body > .slide').each( function(){
	var section = $(this),item = $('.item',section ),demo = $('.demo',section ),itemHeight = item.outerHeight(),demoHeight = demo.outerHeight();
	item.css({
	marginTop:( ( sectionHeight - itemHeight ) / 2 ) + 'px'}
);
	demo.css({
	marginTop:( ( sectionHeight - demoHeight ) / 2 ) + 'px'}
);
}
);
	$(window).load(function(){
}
);
}
);

JS代码(prismjs.js):

/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+php */
var self=typeof window!="undefined"?window:{
}
,Prism=function(){
	var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={
	util:{
	encode:function(e){
	return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;
	").replace(/</g,"&lt;
	").replace(/\u00a0/g," ")}
,type:function(e){
	return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]}
,clone:function(e){
	var n=t.util.type(e);
	switch(n){
	case"Object":var r={
}
;
	for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));
	return r;
	case"Array":return e.slice()}
return e}
}
,languages:{
	extend:function(e,n){
	var r=t.util.clone(t.languages[e]);
	for(var i in n)r[i]=n[i];
	return r}
,insertBefore:function(e,n,r,i){
	i=i||t.languages;
	var s=i[e],o={
}
;
	for(var u in s)if(s.hasOwnProperty(u)){
	if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);
	o[u]=s[u]}
return i[e]=o}
,DFS:function(e,n){
	for(var r in e){
	n.call(e,r,e[r]);
	t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}
}
}
,highlightAll:function(e,n){
	var r=document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code');
	for(var i=0,s;
	s=r[i++];
	)t.highlightElement(s,e===!0,n)}
,highlightElement:function(r,i,s){
	var o,u,a=r;
	while(a&&!e.test(a.className))a=a.parentNode;
	if(a){
	o=(a.className.match(e)||[,""])[1];
	u=t.languages[o]}
if(!u)return;
	r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;
	a=r.parentNode;
	/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);
	var f=r.textContent;
	if(!f)return;
	var l={
	element:r,language:o,grammar:u,code:f}
;
	t.hooks.run("before-highlight",l);
	if(i&&self.Worker){
	var c=new Worker(t.filename);
	c.onmessage=function(e){
	l.highlightedCode=n.stringify(JSON.parse(e.data),o);
	t.hooks.run("before-insert",l);
	l.element.innerHTML=l.highlightedCode;
	s&&s.call(l.element);
	t.hooks.run("after-highlight",l)}
;
	c.postMessage(JSON.stringify({
	language:l.language,code:l.code}
))}
else{
	l.highlightedCode=t.highlight(l.code,l.grammar,l.language);
	t.hooks.run("before-insert",l);
	l.element.innerHTML=l.highlightedCode;
	s&&s.call(r);
	t.hooks.run("after-highlight",l)}
}
,highlight:function(e,r,i){
	var s=t.tokenize(e,r);
	return n.stringify(t.util.encode(s),i)}
,tokenize:function(e,n,r){
	var i=t.Token,s=[e],o=n.rest;
	if(o){
	for(var u in o)n[u]=o[u];
	delete n.rest}
e:for(var u in n){
	if(!n.hasOwnProperty(u)||!n[u])continue;
	var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;
	a=a.pattern||a;
	for(var h=0;
	h<s.length;
	h++){
	var p=s[h];
	if(s.length>e.length)break e;
	if(p instanceof i)continue;
	a.lastIndex=0;
	var d=a.exec(p);
	if(d){
	l&&(c=d[1].length);
	var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];
	y&&w.push(y);
	var E=new i(u,f?t.tokenize(d,f):d);
	w.push(E);
	b&&w.push(b);
	Array.prototype.splice.apply(s,w)}
}
}
return s}
,hooks:{
	all:{
}
,add:function(e,n){
	var r=t.hooks.all;
	r[e]=r[e]||[];
	r[e].push(n)}
,run:function(e,n){
	var r=t.hooks.all[e];
	if(!r||!r.length)return;
	for(var i=0,s;
	s=r[i++];
	)s(n)}
}
}
,n=t.Token=function(e,t){
	this.type=e;
	this.content=t}
;
	n.stringify=function(e,r,i){
	if(typeof e=="string")return e;
	if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){
	return n.stringify(t,r,e)}
).join("");
	var s={
	type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{
}
,language:r,parent:i}
;
	s.type=="comment"&&(s.attributes.spellcheck="true");
	t.hooks.run("wrap",s);
	var o="";
	for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';
	return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"}
;
	if(!self.document){
	if(!self.addEventListener)return self.Prism;
	self.addEventListener("message",function(e){
	var n=JSON.parse(e.data),r=n.language,i=n.code;
	self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));
	self.close()}
,!1);
	return self.Prism}
var r=document.getElementsByTagName("script");
	r=r[r.length-1];
	if(r){
	t.filename=r.src;
	document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}
return self.Prism}
();
	typeof module!="undefined"&&module.exports&&(module.exports=Prism);
	;
	Prism.languages.markup={
	comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{
	pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{
	tag:{
	pattern:/^<\/?[\w:-]+/i,inside:{
	punctuation:/^<\/?/,namespace:/^[\w-]+?:/}
}
,"attr-value":{
	pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{
	punctuation:/=|>|"/g}
}
,punctuation:/\/?>/g,"attr-name":{
	pattern:/[\w:-]+/g,inside:{
	namespace:/^[\w-]+?:/}
}
}
}
,entity:/\&#?[\da-z]{
	1,8}
;
	/gi}
;
	Prism.hooks.add("wrap",function(e){
	e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;
	/,"&"))}
);
	;
	Prism.languages.css={
	comment:/\/\*[\w\W]*?\*\//g,atrule:{
	pattern:/@[\w-]+?.*?(;
	|(?=\s*{
	))/gi,inside:{
	punctuation:/[;
	:]/g}
}
,url:/url\((["']?).*?\1\)/gi,selector:/[^\{
	\}
\s][^\{
	\}
;
	]*(?=\s*\{
	)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{
	\}
;
	:]/g,"function":/[-a-z0-9]+(?=\()/ig}
;
	Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
	style:{
	pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{
	tag:{
	pattern:/<style[\w\W]*?>|<\/style>/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.css}
}
}
);
	;
	Prism.languages.clike={
	comment:{
	pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0}
,string:/("|')(\\?.)*?\1/g,"class-name":{
	pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{
	punctuation:/(\.|\\)/}
}
,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{
	pattern:/[a-z0-9_]+\(/ig,inside:{
	punctuation:/\(/}
}
,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{
	1,2}
|!|<=?|>=?|={
	1,3}
|&{
	1,2}
|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);
	/gi,punctuation:/[{
}
[\];
	(),.:]/g}
;
	;
	Prism.languages.javascript=Prism.languages.extend("clike",{
	keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}
);
	Prism.languages.insertBefore("javascript","keyword",{
	regex:{
	pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{
	0,3}
(?=\s*($|[\r\n,.;
}
)]))/g,lookbehind:!0}
}
);
	Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
	script:{
	pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{
	tag:{
	pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.javascript}
}
}
);
	;
	/** * Original by Aaron Harun:http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/ * Modified by Miles Johnson:http://milesj.me * * Supports the following:*- Extends clike syntax *- Support for PHP 5.3+ (namespaces,traits,generators,etc) *- Smarter constant and function matching * * Adds the following new token classes:*constant,delimiter,variable,function,package */
Prism.languages.php=Prism.languages.extend("clike",{
	keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/ig,constant:/\b[A-Z0-9_]{
	2,}
\b/g,comment:{
	pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])(\/\/|#).*?(\r?\n|$))/g,lookbehind:!0}
}
);
	Prism.languages.insertBefore("php","keyword",{
	delimiter:/(\?>|<\?php|<\?)/ig,variable:/(\$\w+)\b/ig,"package":{
	pattern:/(\\|namespace\s+|use\s+)[\w\\]+/g,lookbehind:!0,inside:{
	punctuation:/\\/}
}
}
);
	Prism.languages.insertBefore("php","operator",{
	property:{
	pattern:/(->)[\w]+/g,lookbehind:!0}
}
);
	if(Prism.languages.markup){
	Prism.hooks.add("before-highlight",function(e){
	if(e.language!=="php")return;
	e.tokenStack=[];
	e.code=e.code.replace(/(?:<\?php|<\?)[\w\W]*?(?:\?>)/ig,function(t){
	e.tokenStack.push(t);
	return"{
	{
	{
	PHP"+e.tokenStack.length+"}
}
}
"}
)}
);
	Prism.hooks.add("after-highlight",function(e){
	if(e.language!=="php")return;
	for(var t=0,n;
	n=e.tokenStack[t];
	t++)e.highlightedCode=e.highlightedCode.replace("{
	{
	{
	PHP"+(t+1)+"}
}
}
",Prism.highlight(n,e.grammar,"php"));
	e.element.innerHTML=e.highlightedCode}
);
	Prism.hooks.add("wrap",function(e){
	e.language==="php"&&e.type==="markup"&&(e.content=e.content.replace(/(\{
	\{
	\{
	PHP[0-9]+\}
\}
\}
)/g,'<span class="token php">$1</span>'))}
);
	Prism.languages.insertBefore("php","comment",{
	markup:{
	pattern:/<[^?]\/?(.*?)>/g,inside:Prism.languages.markup}
,php:/\{
	\{
	\{
	PHP[0-9]+\}
\}
\}
/g}
)}
;
	;

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?yrquyl');src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'),url('../fonts/icomoon.woff?yrquyl') format('woff'),url('../fonts/icomoon.ttf?yrquyl') format('truetype'),url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
;.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:3em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
h1.htmleaf-title{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;font-size:2em;line-height:1;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related h3{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-home:before{content:"\e600";}
.icon-pacman:before{content:"\e623";}
.icon-users2:before{content:"\e678";}
.icon-bug:before{content:"\e699";}
.icon-eye:before{content:"\e610";}
.icon-eye-blocked:before{content:"\e611";}
.icon-eye2:before{content:"\e612";}
.icon-arrow-up-left3:before{content:"\e72f";}
.icon-arrow-up3:before{content:"\e730";}
.icon-arrow-up-right3:before{content:"\e731";}
.icon-arrow-right3:before{content:"\e732";}
.icon-arrow-down-right3:before{content:"\e733";}
.icon-arrow-down3:before{content:"\e734";}
.icon-arrow-down-left3:before{content:"\e735";}
.icon-arrow-left3:before{content:"\e736";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

CSS代码(style.css):

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:hover,a:active{outline:0}
h1{font-size:2em;margin:0.67em 0}
h2{font-size:1.5em;margin:0.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:0.83em;margin:1.67em 0}
h6{font-size:0.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:75%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 0}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,table,th,td,caption,hr{margin:0;padding:0}
abbr[title],dfn[title]{cursor:help}
u,ins{text-decoration:none}
ins{border-bottom:1px solid}
img{font-style:italic}
.cf:after{content:" ";display:table;clear:both}
h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.form-fields>li{margin-bottom:24px;margin-bottom:1.5rem}
.double-margin{margin-bottom:48px;margin-bottom:3rem}
hr{margin-bottom:22px;margin-bottom:1.375rem}
html{font:1em/1.5 "Open Sans",sans-serif;overflow-y:scroll;min-height:100%}
body{background:#fff;color:#555;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:#555;font-family:"Open Sans",sans-serif;font-weight:300}
h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.33333}
h2,.h2{font-size:30px;font-size:1.875rem;line-height:1.6}
h3,.h3{font-size:24px;font-size:1.5rem;line-height:1}
h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.2}
h5,.h5{font-size:16px;font-size:1rem;line-height:1.5}
h6,.h6{font-size:14px;font-size:0.875rem;line-height:1.71429}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
.giga{font-size:96px;font-size:6rem;line-height:1}
.mega{font-size:72px;font-size:4.5rem;line-height:1}
.kilo{font-size:48px;font-size:3rem;line-height:1}
.smaller{font-size:12px;font-size:0.75rem;line-height:2}
.tiny{font-size:10px;font-size:0.625rem;line-height:2.4}
.lead{font-size:18px;font-size:1.125rem;line-height:1.33333}
.smaller{font-size:12px;font-size:0.75rem;line-height:2}
.tiny{font-size:10px;font-size:0.625rem;line-height:2.4}
a,a:visited{color:#cd3737;text-decoration:none;-webkit-transition:color 0.2s;-moz-transition:color 0.2s;-o-transition:color 0.2s;transition:color 0.2s;-webkit-transition:background 0.2s;-moz-transition:background 0.2s;-o-transition:background 0.2s;transition:background 0.2s}
a:hover,a:focus{color:#a72a2a}
li>ul,li>ol{margin:0}
blockquote{text-indent:-0.41em}
blockquote p:last-of-type{margin-bottom:0}
.source{display:block;text-indent:0}
.source:before{content:"\2014"}
img{max-width:100%;height:auto}
img[width],img[height]{max-width:none}
.img-right{float:right;margin-bottom:24px;margin-left:24px}
.img-left{float:left;margin-right:24px;margin-bottom:24px}
.img-center{display:block;margin-right:auto;margin-bottom:24px;margin-left:auto}
.img-short{height:120px}
.img-medium{height:240px}
.img-tall{height:360px}
figure>img{display:block}
pre{overflow:auto}
pre mark{background:none;border-bottom:1px solid;color:inherit}
.code-comment{opacity:0.75;filter:alpha(opacity=75)}
.line-numbers{font-family:monospace,serif;list-style:decimal-leading-zero inside;white-space:nowrap;overflow:auto;margin-left:0}
.line-numbers code{white-space:pre}
fieldset{padding:24px;border:1px solid #e2e2e2}
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="number"],input[type="password"],input[type="time"],input[type="url"],input[type="search"],.text-input,textarea{width:100%;font-size:12px;font-size:0.75rem;line-height:2;border:1px solid #e2e2e2;border-radius:4px;padding:5px 10px;box-shadow:0 1px 4px 0 #ddd inset}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="date"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="time"]:focus,input[type="url"]:focus,input[type="search"]:focus,.text-input:focus,textarea:focus{outline:none;border:1px solid #cd3737;box-shadow:0 0 3px 0 #aaa}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.form-fields{list-style:none;margin:0}
.form-fields>li:last-child{margin-bottom:0}
label,.label{display:block}
.additional{display:block;font-weight:normal}
.check-list{list-style:none;margin:0}
.check-label,.check-list label,.check-list .label{display:inline-block}
.spoken-form label{display:inline-block;font:inherit}
.extra-help{display:inline-block;visibility:hidden}
.text-input:active+.extra-help,.text-input:focus+.extra-help{visibility:visible}
table{width:100%}
th,td{padding:6px;text-align:left}
@media screen and (min-width:480px){th,td{padding:12px}
}
[colspan]{text-align:center}
[colspan="1"]{text-align:left}
[rowspan]{vertical-align:middle}
[rowspan="1"]{vertical-align:top}
.numerical{text-align:right}
.t5{width:5%}
.t10{width:10%}
.t12{width:12.5%}
.t15{width:15%}
.t20{width:20%}
.t25{width:25%}
.t30{width:30%}
.t33{width:33.333%}
.t35{width:35%}
.t37{width:37.5%}
.t40{width:40%}
.t45{width:45%}
.t50{width:50%}
.t55{width:55%}
.t60{width:60%}
.t62{width:62.5%}
.t65{width:65%}
.t66{width:66.666%}
.t70{width:70%}
.t75{width:75%}
.t80{width:80%}
.t85{width:85%}
.t87{width:87.5%}
.t90{width:90%}
.t95{width:95%}
.table-bordered th,.table-bordered td{border:1px solid #cd3737}
.table-bordered th:empty,.table-bordered td:empty{border:none}
.table-bordered thead tr:last-child th{border-bottom-width:2px}
.table-bordered tbody tr th:last-of-type{border-right-width:2px}
.table-striped tbody tr:nth-of-type(odd){background-color:#fafafa}
.table-data{font:12px/1.5 sans-serif}
.container{*zoom:1;width:1040px;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}
.container:after{content:"";display:table;clear:both}
.float-right{float:right !important}
.float-left{float:left !important}
.float-none{float:none !important}
.text-left{text-align:left !important}
.text-center{text-align:center !important}
.text-right{text-align:right !important}
.weight-light{font-weight:300 !important}
.weight-normal{font-weight:400 !important}
.weight-semibold{font-weight:600 !important}
.push{margin:24px !important}
.push-top{margin-top:24px !important}
.push-right{margin-right:24px !important}
.push-bottom{margin-bottom:24px !important}
.push-left{margin-left:24px !important}
.push-ends{margin-top:24px !important;margin-bottom:24px !important}
.push-sides{margin-right:24px !important;margin-left:24px !important}
.push-half{margin:12px !important}
.push-half-top{margin-top:12px !important}
.push-half-right{margin-right:12px !important}
.push-half-bottom{margin-bottom:12px !important}
.push-half-left{margin-left:12px !important}
.push-half-ends{margin-top:12px !important;margin-bottom:12px !important}
.push-half-sides{margin-right:12px !important;margin-left:12px !important}
.flush{margin:0 !important}
.flush-top{margin-top:0 !important}
.flush-right{margin-right:0 !important}
.flush-bottom{margin-bottom:0 !important}
.flush-left{margin-left:0 !important}
.flush-ends{margin-top:0 !important;margin-bottom:0 !important}
.flush-sides{margin-right:0 !important;margin-left:0 !important}
.soft{padding:24px !important}
.soft-top{padding-top:24px !important}
.soft-right{padding-right:24px !important}
.soft-bottom{padding-bottom:24px !important}
.soft-left{padding-left:24px !important}
.soft-ends{padding-top:24px !important;padding-bottom:24px !important}
.soft-sides{padding-right:24px !important;padding-left:24px !important}
.soft-half{padding:12px !important}
.soft-half-top{padding-top:12px !important}
.soft-half-right{padding-right:12px !important}
.soft-half-bottom{padding-bottom:12px !important}
.soft-half-left{padding-left:12px !important}
.soft-half-ends{padding-top:12px !important;padding-bottom:12px !important}
.soft-half-sides{padding-right:12px !important;padding-left:12px !important}
.hard{padding:0 !important}
.hard-top{padding-top:0 !important}
.hard-right{padding-right:0 !important}
.hard-bottom{padding-bottom:0 !important}
.hard-left{padding-left:0 !important}
.hard-ends{padding-top:0 !important;padding-bottom:0 !important}
.hard-sides{padding-right:0 !important;padding-left:0 !important}
.informative{cursor:help !important}
.muted{opacity:0.5 !important;filter:alpha(opacity=50) !important}
.proceed{text-align:right !important}
.go:after{content:"\00A0" "\00BB" !important}
.caps{text-transform:uppercase !important}
.unstyled{margin:0;padding:0;list-style-type:none}
.container{*zoom:1;width:1040px;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}
.container:after{content:"";display:table;clear:both}
.sep{margin:0 8px}
.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:none;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;border-radius:4px;border:1px solid #e2e2e2}
.btn,.btn:hover{text-decoration:none}
.btn:active,.btn:focus{outline:none}
.btn-small{line-height:2}
.btn-large{line-height:4;padding-left:1.5em;padding-right:1.5em}
.btn-extra-large{line-height:5;padding-left:2em;padding-right:2em}
.btn-full-width{width:100%;padding-left:0;padding-right:0;text-align:center}
.btn-default,.btn-default:visited{background:none;border:1px solid #e2e2e2;color:#333}
.btn-default:hover,.btn-default:focus,.btn-default:visited:hover,.btn-default:visited:focus{color:#333;border:1px solid #e9e9e9}
.btn-brand,.btn-brand:visited{background:#cd3737;border:none;color:#fff}
.btn-brand:hover,.btn-brand:focus,.btn-brand:visited:hover,.btn-brand:visited:focus{background:#a72a2a;border:none}
.btn-sub-brand,.btn-sub-brand:visited{background:#cd3737;border:none;color:#fff}
.btn-sub-brand:hover,.btn-sub-brand:focus,.btn-sub-brand:visited:hover,.btn-sub-brand:visited:focus{background:#a72a2a;border:none}
.btn-blue,.btn-blue:visited{background:#3498db;border:none;color:#fff}
.btn-blue:hover,.btn-blue:focus,.btn-blue:visited:hover,.btn-blue:visited:focus{background:#2980b9;border:none}
.btn-green,.btn-green:visited{background:#26a65b;border:none;color:#fff}
.btn-green:hover,.btn-green:focus,.btn-green:visited:hover,.btn-green:visited:focus{background:#16a085;border:none}
.btn-emerald,.btn-emerald:visited{background:#2ecc71;border:none;color:#fff}
.btn-emerald:hover,.btn-emerald:focus,.btn-emerald:visited:hover,.btn-emerald:visited:focus{background:#27ae60;border:none}
.btn-red,.btn-red:visited{background:#e74c3c;border:none;color:#fff}
.btn-red:hover,.btn-red:focus,.btn-red:visited:hover,.btn-red:visited:focus{background:#c0392b;border:none}
.btn-yellow,.btn-yellow:visited{background:#f1c40f;border:none;color:#fff}
.btn-yellow:hover,.btn-yellow:focus,.btn-yellow:visited:hover,.btn-yellow:visited:focus{background:#f39c12;border:none}
.btn-orange,.btn-orange:visited{background:#eb7347;border:none;color:#fff}
.btn-orange:hover,.btn-orange:focus,.btn-orange:visited:hover,.btn-orange:visited:focus{background:#d35400;border:none}
.btn-purple,.btn-purple:visited{background:#9b59b6;border:none;color:#fff}
.btn-purple:hover,.btn-purple:focus,.btn-purple:visited:hover,.btn-purple:visited:focus{background:#8e44ad;border:none}
.btn-navy,.btn-navy:visited{background:#34495e;border:none;color:#fff}
.btn-navy:hover,.btn-navy:focus,.btn-navy:visited:hover,.btn-navy:visited:focus{background:#2c3e50;border:none}
.btn-disabled,.btn-disabled:visited{background:#e2e2e2;border:none;color:#e9e9e9}
.btn-disabled:hover,.btn-disabled:focus,.btn-disabled:active,.btn-disabled:visited:hover,.btn-disabled:visited:focus,.btn-disabled:visited:active{background:#e2e2e2;border:none;cursor:text}
.btn-pill{border-radius:200px}
.btn-sharp{border-radius:0}
.nav{margin:0;padding:0;list-style:none}
.nav>li,.nav>li>a{display:inline-block;*display:inline;zoom:1}
.nav-vertical>li{display:list-item}
.nav-vertical>li>a{display:block}
.nav-centered{text-align:center}
.nav-fit{display:table;width:100%;text-align:center}
.nav-fit>li{display:table-cell}
.nav-fit>li>a{display:block}
.img-rounded,.img-bordered,.img-thumb{border-radius:4px}
.img-circle{border-radius:100%}
.img-bordered,.img-thumb{padding:4px;border:1px solid #e2e2e2}
.img-thumb:hover{border:1px solid #cd3737}
.message.error li{background:#e74c3c;color:white;padding:20px}
.message.success li{background:#26a65b;color:white;padding:20px}
.message li a,.message li a:visited{color:white;text-decoration:underline}
.breadcrumb>li+li:before{content:"\00BB" "\00A0";padding-left:4px}
.breadcrumb-path>li+li:before{content:"\002F" "\00A0";padding-left:4px;color:#e9e9e9}
.breadcrumb>li+li[data-breadcrumb]:before{content:attr(data-breadcrumb) "\00A0";padding-left:4px;color:#e9e9e9}
.breadcrumb-root{font-weight:bold}
.pagination{text-align:center;letter-spacing:-0.31em;word-spacing:-0.43em}
.pagination>li{padding:12px;letter-spacing:normal;word-spacing:normal}
.pagination>li>a{padding:12px;margin:-12px}
.pagination-first a:before{content:"\00AB" "\00A0"}
.pagination-last a:after{content:"\00A0" "\00BB"}
hr{color:#e2e2e2;border:none;border-bottom-width:1px;border-bottom-style:solid;margin-bottom:23px;margin-bottom:1.4375rem}
.rule-dotted{border-bottom-style:dotted}
.rule-dashed{border-bottom-style:dashed}
.rule-ornament{position:relative}
.rule-ornament:after{content:"\00A7";position:absolute;top:0;right:0;left:0;line-height:0;text-align:center}
.rule-ornament[data-ornament]:after{content:attr(data-ornament)}
.tabs2>ul{margin:0;padding:0}
.tabs2>ul:nth-child(1){border-bottom:1px solid #e9e9e9}
.tabs2>ul:nth-child(1) li{display:inline;float:left;padding:15px 20px;border:1px solid white;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}
.tabs2>ul:nth-child(1) li.active{border-color:#e9e9e9;border-bottom:1px solid white;position:relative;z-index:2;bottom:-1px}
.tabs2>ul:nth-child(2){border:1px solid #e9e9e9;border-top:none}
.tabs2>ul:nth-child(2)>li{padding:20px}
.tabs>ul.head{text-align:center;margin:0 0 20px 0}
.tabs>ul.head li{font-size:16px;font-size:1rem;line-height:1.5;display:inline-block;padding:5px;cursor:pointer;text-transform:uppercase}
.tabs>ul.head li.active{color:#cd3737}
.tabs>ul.head li span{display:inline-block;margin-left:5px;color:#313131}
@-webkit-keyframes pulse{0%{opacity:1}
100%{opacity:0;transform:scale(2,2)}
}
@-moz-keyframes pulse{0%{opacity:1}
100%{opacity:0;transform:scale(2,2)}
}
@-o-keyframes pulse{0%{opacity:1}
100%{opacity:0;transform:scale(2,2)}
}
@keyframes pulse{0%{opacity:1}
100%{opacity:0;transform:scale(1.5,1.5)}
}
.flare-wrapper{position:relative}
.flare-wrapper .flare{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:none;position:absolute;width:300px;padding:15px;background:black;color:white;z-index:999}
.flare-wrapper .flare>.before{z-index:999;position:absolute;content:" ";width:0;height:0;border-style:solid}
.flare-wrapper .flare>.before:before{z-index:9991;position:absolute;content:" ";width:0;height:0;border-style:solid}
.flare-wrapper .flare[data-position="top-right"]{margin:0 0 0 20px;left:100%;top:-7px}
.flare-wrapper .flare[data-position="top-right"]>.before{left:-10px;top:10px;border-width:8px 10px 8px 0;border-color:transparent #000103 transparent transparent}
.flare-wrapper .flare[data-position="top-left"]{margin:0 20px 0 0;right:100%;top:-7px}
.flare-wrapper .flare[data-position="top-left"]>.before{right:-10px;top:10px;border-width:8px 0 8px 10px;border-color:transparent transparent transparent #000103}
.flare-wrapper .flare[data-position="top-center"]{margin:0 0 10px -150px;left:50%;bottom:100%}
.flare-wrapper .flare[data-position="top-center"]>.before{margin:0 0 0 -8px;left:50%;top:100%;border-width:10px 8px 0 8px;border-color:#000103 transparent transparent transparent}
.flare-wrapper .flare[data-position="bottom-center"]{margin:10px 0 0 -150px;left:50%;top:100%;background:#eee;border:3px solid black;color:#404040}
.flare-wrapper .flare[data-position="bottom-center"]>.before{margin:0 0 0 -8px;left:50%;bottom:100%;border-width:0 8px 10px 8px;border-color:transparent transparent #000103 transparent}
.flare-wrapper .flare[data-position="bottom-center"]>.before:before{top:4px;left:3px;margin:0 0 0 -8px;border-width:0 5px 7px 5px;border-color:transparent transparent #eee transparent}
.flare-wrapper .pointer{width:33px;height:33px;position:absolute;cursor:pointer;z-index:99}
.flare-wrapper .pointer.top-right{top:0;right:-45px}
.flare-wrapper .pointer.top-left{top:0;left:-45px}
.flare-wrapper .pointer.top-center{top:0;left:50%;margin-left:-16px}
.flare-wrapper .pointer.bottom-center{top:100%;left:50%;margin-left:-16px}
.flare-wrapper .pointer span{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;display:block;-webkit-animation:pulse 2s infinite;-moz-animation:pulse 2s infinite;-o-animation:pulse 2s infinite;animation:pulse 2s infinite;background:white}
.flare-wrapper .pointer>span{height:20px;width:20px;border:1px solid black;text-align:center}
.flare-wrapper .pointer>span:hover{border-color:red}
.flare-wrapper .pointer>span:hover span{border-color:orange}
.flare-wrapper .pointer>span>span{height:6px;width:6px;border:1px solid grey;margin:6px auto}
ul.flare-buttons{overflow:hidden;margin:20px 0 0 0}
ul.flare-buttons li{list-style:none;display:inline;float:left}
ul.flare-buttons li a,ul.flare-buttons li a:visited{display:block;padding:10px 15px;text-transform:uppercase;font-size:13px}
ul.flare-buttons li.okay a{-webkit-border-radius:3px 0px 0px 3px;-moz-border-radius:3px 0px 0px 3px;-ms-border-radius:3px 0px 0px 3px;-o-border-radius:3px 0px 0px 3px;border-radius:3px 0px 0px 3px;background:green;color:white}
ul.flare-buttons li.close a{-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;-ms-border-radius:0px 3px 3px 0px;-o-border-radius:0px 3px 3px 0px;border-radius:0px 3px 3px 0px;background:red;color:white}
body.demo-flare{font-family:arial,sans-serif}
body.demo-flare #top-nav{float:right;margin:5px 20px}
body.demo-flare #top-nav>li{display:inline;float:left;height:27px}
body.demo-flare #top-nav>li>a,body.demo-flare #top-nav>li>a:visited{display:block;padding:10px;font-size:13px;line-height:27px;vertical-align:middle;color:#404040}
body.demo-flare #top-nav>li>a>i,body.demo-flare #top-nav>li>a:visited>i{font-size:22px;margin:3px 0 0 0}
html.fsvs{height:100%;width:100%;position:fixed;top:0;left:0;overflow:hidden}
html.fsvs #fsvs-body{-webkit-backface-visibility:hidden;-webkit-perspective:1000;position:absolute;top:0;left:0;z-index:1;height:100%;width:100%}
html.fsvs #fsvs-body>*{height:100%;width:100%;overflow:hidden;-webkit-backface-visibility:hidden;-webkit-perspective:1000}
html.fsvs.no-hijack{overflow:auto;position:relative}
html.fsvs.no-hijack #fsvs-body{position:static;transition:none !important;-webkit-transition:none !important;-webkit-transform:none !important;transform:none !important}
html.fsvs.no-hijack #fsvs-pagination{display:none}
html.fsvs #fsvs-pagination{margin:0;padding:8px 4px;position:fixed;height:auto;right:-100px;top:50%;z-index:999;width:32px}
html.fsvs #fsvs-pagination li{list-style:none;width:25px;height:25px;line-height:25px;text-align:center;margin:0 0 2px 0;cursor:pointer}
html.fsvs #fsvs-pagination li>span{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;width:22px;height:22px;line-height:22px;border:1px solid white;display:block}
html.fsvs #fsvs-pagination li>span>span{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;width:12px;height:12px;line-height:12px;border:1px solid white;display:block;margin:4px}
html.fsvs #fsvs-pagination li.active>span{border:1px dashed white}
html.fsvs #fsvs-pagination li.active>span>span{background:white}
html.fsvs #fsvs-pagination li:last-child{margin:0}
html.fsvs.demo #fsvs-body>.slide{padding:40px;text-align:center}
html.fsvs.demo #fsvs-body>.slide h2{color:white;text-transform:uppercase;font-weight:bold;font-size:38px;font-size:2.375rem;line-height:1.26316}
html.fsvs.demo #fsvs-body>.slide p{font-size:22px;font-size:1.375rem;line-height:1.09091;color:white}
html.fsvs.demo #fsvs-body>.slide.nth-class-1{background:#eb7347}
html.fsvs.demo #fsvs-body>.slide.nth-class-2{background:#26a65b}
html.fsvs.demo #fsvs-body>.slide.nth-class-3{background:#d24d57}
html.fsvs.demo #fsvs-body>.slide pre{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:inline-block;padding:20px 60px;margin:40px 0}
@media only screen and (max-width:500px){html.fsvs #fsvs-body>.slide h2{font-size:18px;font-size:1.125rem;line-height:1.33333}
html.fsvs #fsvs-body>.slide p{font-size:18px;font-size:1.125rem;line-height:1.33333}
html.fsvs #fsvs-body>.slide p a{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:block}
html.fsvs #fsvs-body>.slide pre{max-width:100%;overflow:auto}
html.fsvs #fsvs-body>.slide pre code{float:left}
html.fsvs #fsvs-body #fsvs-pagination{right:3px !important}
}
body{font-family:'Open Sans',sans-serif}
#git{position:fixed;right:0;top:0;width:130px;height:130px;z-index:99999}
#git a,#git a:visited{font-size:38px;font-size:2.375rem;line-height:1.26316;color:grey;display:block;position:absolute;top:8px;right:10px;z-index:3}
#git:after{position:absolute;right:0;top:0;z-index:2;content:" ";width:0;height:0;border-style:solid;border-width:0 100px 100px 0;border-color:transparent #000000 transparent transparent}
header{position:fixed;left:0;top:0;z-index:999;width:100px !important;background:black;padding:20px;height:100%}
header a,header a:visited{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s}
header h1{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;text-transform:uppercase;font-size:21px}
header ul{padding:20px}
header ul li{list-style:none;margin:0 0 5px 0;font-size:22px}
body.active-nth-slide-1 header h1,body.active-nth-slide-1 header a,body.active-nth-slide-1 header a:visited{color:#eb7347}
body.active-nth-slide-1 #fsvs-pagination li.active>span>span{background:#e65019}
body.active-nth-slide-2 header h1,body.active-nth-slide-2 header a,body.active-nth-slide-2 header a:visited{color:#26a65b}
body.active-nth-slide-2 #fsvs-pagination li.active>span>span{background:#1c7d44}
body.active-nth-slide-3 header h1,body.active-nth-slide-3 header a,body.active-nth-slide-3 header a:visited{color:#d24d57}
body.active-nth-slide-3 #fsvs-pagination li.active>span>span{background:#bc303a}
body.active-nth-slide-4 header h1,body.active-nth-slide-4 header a,body.active-nth-slide-4 header a:visited{color:#2c3e50}
body.active-nth-slide-4 #fsvs-pagination li.active>span>span{background:#1a242f}
.slide{padding:0px 40px 0px 100px}
.slide h2{font-size:22px;text-transform:uppercase}
.slide *,.slide a,.slide a:visited{color:white}
.slide .wrapper{position:relative;z-index:3}
.slide .wrapper>.left,.slide .wrapper>.right{width:50%;display:inline;float:left;padding:0 40px}
.slide .image-wrapper{position:absolute;z-index:2;width:100%;height:100%;background:url(/assets/images/bg.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
.slide .colour-wrapper{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8;position:absolute;z-index:2;width:100%;height:100%}
.slide .item{padding:30px}
.slide .item .description{margin:0 0 10px 0}
.slide .item p:last-child{margin:0}
.slide .demo{padding:30px;background:black;text-align:center}
.slide .demo p:last-child{margin:0}
.slide .link{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.slide .project-link a,.slide .project-link a:visited{-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:inline-block;padding:10px 20px;text-align:center;text-decoration:none}
.slide .project-link a:hover,.slide .project-link a:visited:hover{background:black !important;color:white !important}
.slide.nth-class-1{background:#eb7347}
.slide.nth-class-1 .colour-wrapper,.slide.nth-class-1 .item{background:#eb7347}
.slide.nth-class-1 .colour-wrapper .project-link a,.slide.nth-class-1 .item .project-link a{background:#e65019}
.slide.nth-class-2{background:#26a65b}
.slide.nth-class-2 .colour-wrapper,.slide.nth-class-2 .item{background:#26a65b}
.slide.nth-class-2 .colour-wrapper .project-link a,.slide.nth-class-2 .item .project-link a{background:#1c7d44}
.slide.nth-class-3{background:#d24d57}
.slide.nth-class-3 .colour-wrapper,.slide.nth-class-3 .item{background:#d24d57}
.slide.nth-class-3 .colour-wrapper .project-link a,.slide.nth-class-3 .item .project-link a{background:#bc303a}
.slide.nth-class-4{background:#2c3e50}
.slide.nth-class-4 .colour-wrapper,.slide.nth-class-4 .item{background:#2c3e50}
.slide.nth-class-4 .colour-wrapper .project-link a,.slide.nth-class-4 .item .project-link a{background:#1a242f}
@media only screen and (max-width:769px){html body #git{margin:15px 20px 0 0}
html body #git:after{display:none}
html body header{width:100% !important;height:100px !important}
html body header h1{font-size:14px;font-size:0.875rem;line-height:1.71429;line-height:20px}
html body header h1,html body header ul{display:inline;float:left}
html body header ul{padding:15px 20px 15px 15px;float:right;margin:0 20px 0 0}
html body header ul li{display:inline;float:left;margin:0 20px 0 0}
html body .slide{padding:0px}
html body .slide>.wrapper>.left,html body .slide>.wrapper>.right{width:100%;padding:0 80px}
html body .slide>.wrapper>.left .demo,html body .slide>.wrapper>.right .demo{margin:120px 0 0 0 !important}
html body .slide>.wrapper>.left .item,html body .slide>.wrapper>.right .item{margin:20px 0 0 0 !important}
}
@media only screen and (max-width:415px){html.home-page body #git{margin:5px}
html.home-page body header{height:80px !important;padding:13px 15px}
html.home-page body header h1{font-size:14px}
html.home-page body header ul{padding:10px}
html.home-page body>#fsvs-body .slide .wrapper>.left{padding:20px 20px 20px 20px}
html.home-page body>#fsvs-body .slide .wrapper>.left .demo{margin:80px 0 0 0 !important}
html.home-page body>#fsvs-body .slide .wrapper>.left .demo p{font-size:14px;font-size:0.875rem;line-height:1.71429}
html.home-page body>#fsvs-body .slide .wrapper>.right{padding:0 20px !important}
html.home-page body>#fsvs-body .slide .wrapper>.right .item{margin:0 !important}
html.home-page body>#fsvs-body .slide .wrapper>.right .item .description p{font-size:14px;font-size:0.875rem;line-height:1.71429}
html.home-page body #fsvs-pagination{display:none}
}
.no-hijack-content{margin:0 0 0 100px;padding:40px 20px 200px 20px;background:black;color:white}
.no-hijack-content h3{margin:20px 0 80px 0;text-shadow:0px 1px 30px #fff}
.no-hijack-content .employment{width:23.27189%;float:left;margin-right:2.30415%;display:inline}
.no-hijack-content .employment:nth-child(4n){width:23.27189%;float:right;margin-right:0;*margin-left:-20px;display:inline}
.no-hijack-content .employment h4,.no-hijack-content .employment h4 a,.no-hijack-content .employment h4 a:visited{color:#26a65b}
.no-hijack-content .employment h4{text-shadow:0px 1px 10px #26a65b}
.no-hijack-content .employment p{margin:0 0 5px 0}
.no-hijack-content .employment p i{margin-right:5px}
html.home-page .top-sep{position:relative;width:100%;height:100%;background:black}
html.home-page .top-sep>div{width:500px;position:absolute;left:50%;margin-left:-250px}
html.home-page .top-sep>div h1{text-shadow:0px 1px 60px #fff;color:#eb7347;text-align:center;padding:200px 0 0 0;text-transform:uppercase;font-size:44px;letter-spacing:5px}
html.home-page .top-sep>div p{text-shadow:0px 1px 30px #fff;color:#404040;text-align:center;letter-spacing:5px;line-height:30px}
html.home-page .top-sep>div p i{margin:0 20px}
@media only screen and (max-width:415px){html.home-page .top-sep>div{position:static;margin:0;width:auto;padding:0 20px}
html.home-page .no-hijack-content{margin:0;padding:40px 20px}
html.home-page .no-hijack-content .employment{width:100%;float:right;margin-right:0;*margin-left:-20px;display:inline}
html.home-page .no-hijack-content .employment:nth-child(4n){width:100%;float:right;margin-right:0;*margin-left:-20px;display:inline}
}
#carbonads{position:fixed;top:20px;left:20px;z-index:99999999;width:170px;background:white;padding:20px}
#carbonads a.carbon-text,#carbonads a.carbon-poweredby{font-size:12px;text-align:center;display:block}
.magic-accordion #carbonads{left:100px;top:0}
.single-page{padding:40px;overflow:hidden}
.single-page>.left{width:31.79724%;float:left;margin-right:2.30415%;display:inline}
.single-page>.right{width:65.89862%;float:right;margin-right:0;*margin-left:-20px;display:inline;padding:0 100px 60px 0}
.single-page>.right>ul{padding:0 0 0 20px}
.single-page>.right pre{display:block;margin:0 0 40px 0}
.single-page>.right pre code{display:block;float:left}
.single-page>.right ul.nav-main{margin-bottom:40px}
.single-page>.right #disqus_thread{margin:100px 0 0 0}
.single-page .image{margin:20px 0 40px 0}
.menu{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;border:1px dashed #26a65b;padding:20px;background:#fadcd1;margin:0}
.menu li{position:relative;margin:0 0 2px 0;list-style:none;overflow:hidden;display:block;color:white}
.menu li.ghost span{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8;background:#e74c3c}
.menu li>span{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;background:#eb7347;padding:7px 15px;float:left;cursor:move}
.menu li>span:hover{background:#e65019}
#get-data{margin:20px 0;padding:10px 20px;background:#eb7347;color:white;display:inline-block}
#sd>div{background:black;color:white;padding:20px;margin:20px 0}
.development-warning{font-size:18px;font-size:1.125rem;line-height:1.33333;padding:20px;background:#d24d57;margin:0 0 40px 0;overflow:hidden;color:white}
.development-warning i{font-size:38px;font-size:2.375rem;line-height:1.26316;display:inline;float:left;margin:0 20px 0px 0}
.development-warning p{margin:0 20px 0 0}
@media only screen and (max-width:769px){body .single-page{padding:140px 20px 20px 20px}
body .single-page>.left{display:none}
body .single-page>.right{width:auto;display:block;float:none;padding:0}
body .single-page>.right h1{font-size:22px;font-weight:bold}
}
@media only screen and (max-width:360px){body .single-page{padding:100px 20px 20px 20px}
body .single-page>.left{display:none}
body .single-page>.right{width:auto;display:block;float:none;padding:0}
body .single-page>.right h1{font-size:22px;font-weight:bold}
}
code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
pre[class*="language-"]::-moz-selection,pre[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection{text-shadow:none;background:#b3d4fc}
pre[class*="language-"]::selection,pre[class*="language-"]::selection,code[class*="language-"]::selection,code[class*="language-"]::selection{text-shadow:none;background:#b3d4fc}
@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}
}
pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}
:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}
:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}
.token.punctuation{color:#999}
.namespace{opacity:.7}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905}
.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:rgba(255,255,255,0.5)}
.token.atrule,.token.attr-value,.token.keyword{color:#07a}
.token.function{color:#DD4A68}
.token.regex,.token.important{color:#e90}
.token.important{font-weight:bold}
.token.entity{cursor:help}
.magic-accordion ul.actions{margin:0 0 20px 0;overflow:hidden;padding:0}
.magic-accordion ul.actions li{display:inline;float:left;list-style:none;margin:0 1px 0 0}
.magic-accordion ul.actions li a,.magic-accordion ul.actions li a:visited{display:inline-block;background:#e74c3c;color:white;padding:10px 20px;font-weight:bold}
.magic-accordion ul.actions li a:hover,.magic-accordion ul.actions li a:visited:hover{text-decoration:none}
.magic-accordion .magic-accordion .head{display:block;padding:10px 20px;font-size:16px;cursor:pointer;background:#26a65b;color:white;font-weight:bold;margin:0;border-bottom:1px dotted white}
.magic-accordion .magic-accordion .head.active{background:#e74c3c;border-bottom:1px solid #e74c3c}
.magic-accordion .magic-accordion .head.active i:before{content:"\f139"}
.magic-accordion .magic-accordion .body{padding:20px;border-left:1px dotted #e74c3c;border-right:1px dotted #e74c3c;border-bottom:1px dotted #e74c3c}
.magic-accordion ul{margin:0 0 20px 20px}
.magic-tabs .magic-tabs-tabs{overflow:hidden;margin:0;list-style:none}
.magic-tabs .magic-tabs-tabs .head{-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-ms-border-radius:5px 5px 0 0;-o-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;background:rgba(40,44,42,0.05);border:1px solid rgba(40,44,42,0.1);border-top:3px solid rgba(40,44,42,0.1);border-bottom:none;display:inline;float:left;width:200px;padding:20px;text-align:center;border-right:none;cursor:pointer}
.magic-tabs .magic-tabs-tabs .head.active{border-top:3px solid #2CC185;border-bottom:1px solid #e7ecea;position:relative;z-index:3;background:#e7ecea;color:#2CC185}
.magic-tabs .magic-tabs-tabs .head:last-child{border-right:1px solid rgba(40,44,42,0.1)}
.magic-tabs .magic-tabs-contents{margin:0;position:relative;overflow:hidden;top:-1px;z-index:1}
.magic-tabs .magic-tabs-contents .body{-webkit-border-radius:0 5px 5px 5px;-moz-border-radius:0 5px 5px 5px;-ms-border-radius:0 5px 5px 5px;-o-border-radius:0 5px 5px 5px;border-radius:0 5px 5px 5px;background:#e7ecea;list-style:none;padding:20px;border:1px solid rgba(40,44,42,0.1)}
body.v8{padding:40px 0;background:#20253e;background:-moz-linear-gradient(45deg,#20253e 0%,#524f6f 100%);background:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#20253e),color-stop(100%,#524f6f));background:-webkit-linear-gradient(45deg,#20253e 0%,#524f6f 100%);background:-o-linear-gradient(45deg,#20253e 0%,#524f6f 100%);background:-ms-linear-gradient(45deg,#20253e 0%,#524f6f 100%);background:linear-gradient(45deg,#20253e 0%,#524f6f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#20253e',endColorstr='#524f6f',GradientType=1 );text-align:center}
body.v8 h1{color:white;font-weight:bold;text-transform:uppercase;font-style:italic;margin:0 0 40px 0;display:inline-block;overflow:hidden}
body.v8 h1 span{font-size:60px}
body.v8 h1 span.sub{float:right;text-align:right;font-size:16px}
body.v8 p{color:white}
body.v8 p.special{margin-top:40px;font-size:12px}
body.v8 p.special a,body.v8 p.special a:visited{color:white;text-decoration:underline}
body.v8 #results{color:#747089}
.v8-wrapper{width:250px;height:250px;margin:0 auto 60px auto}
.v8-wrapper svg{width:100%;height:100%}

附件:下载该文件资源,减少时间成本(增值服务)