mklabs/build.js

## build.js


// simple markdown to prez converter

// this uses the really neat impress.js as a presentation framework support.


// slides are delimited by h3 level title.


var fs = require('fs'),
  path = require('path'),
  util = require('util'),
  hbs = require('handlebars'),
  md = require('github-flavored-markdown');

var source = fs.readFileSync(path.join(__dirname, 'md-to-prez.md'), 'utf8'),
  template = hbs.compile(fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8'));

var slides = source.split(/###.+/gim),
  titles = source.match(/###.+/gim);

slides.forEach(function(part, i) {
  console.log([titles[i], part, md.parse(part)].join('\n'));
});

slides = slides.map(function(slide, i) {
  return {
    content: md.parse([titles[i - 1], slide].join('\n')),
    index: i,

    // here, the only used data-attributes are x and y. Others may be too, just needs to adapt our template
    // A nice to have thing would be a way to set them per slides, directly in the markdown content
    x: i * 1000,
    y: -1500,
    z: i,
    scale: i,
    'rotate-x': i * 3,
    'rotate-y': i
  };
});

// create the index.html file, based on the index.html (kindof) template
var output = template({
  slides: slides
});

fs.writeFileSync(path.join(__dirname, 'prez.html'), output);

## md-to-prez.md

      
    Raw
  

              md-to-prez.md
            
          
    markdown to prez thing

simple markdown to prez converter
this uses the really neat impress.js as a presentation framework support.
slides are delimited by h3 level title.
Slides are delimited by h3 title


Each slide is then the content below each title
pretty easy to write

Some bold and italic stuff.

Quoting quoting

code code code

can include code too
var fs = require('fs'),
  path = require('path'),
  util = require('util'),
  hbs = require('handlebars'),
  md = require('github-flavored-markdown');

var source = fs.readFileSync(path.join(__dirname, 'md-to-prez.md'), 'utf8'),
  template = hbs.compile(fs.readFileSync(path.join(__dirname, 'tmpl.html'), 'utf8'));

That's all


Doh !


## style.css
/*
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 1em; line-height: 1.4; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
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: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
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 { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { 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; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/** demo specific css **/

body {

  background-color: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ECE9E9));
  background-image: -webkit-linear-gradient(top, #ffffff, #ECE9E9);
  background-image:    -moz-linear-gradient(top, #ffffff, #ECE9E9);
  background-image:     -ms-linear-gradient(top, #ffffff, #ECE9E9);
  background-image:      -o-linear-gradient(top, #ffffff, #ECE9E9);
  background-image:         linear-gradient(top, #ffffff, #ECE9E9);
}

/** gh style, credits to github guys. **/
body h1,body h2,body h3,body h4,body h5,body h6{border:0 !important;}
body h1:first-child, body h2:first-child, body h3:first-child{margin-top:0 !important;padding-top:.25em !important;border-top:none !important;}
body h2{font-size:150% !important;margin-top:1.5em !important;padding-top:.5em !important;}
body h3{margin-top:1em !important;}
body h1, body h2, body h3, body h4,body h5, body h6 { text-align: left!important; margin-right: 0;!important; margin-left: 0;!important; width: 100%!important; position:relative;}
body p{margin:1em 0 !important;line-height:1.5em !important;}
body a.absent{color:#a00;}
body ul,#wiki-form .content-body ul{margin:1em 0 1em 2em !important;}
body ol,#wiki-form .content-body ol{margin:1em 0 1em 2em !important;}
body ul li,#wiki-form .content-body ul li,body ol li,#wiki-form .content-body ol li{margin-top:.5em;margin-bottom:.5em;}
body ul ul,body ul ol,body ol ol,body ol ul,#wiki-form .content-body ul ul,#wiki-form .content-body ul ol,#wiki-form .content-body ol ol,#wiki-form .content-body ol ul{ margin: 0 !important; }
body blockquote{margin:1em 0 !important;border-left:5px solid #ddd !important;padding-left:.6em !important;color:#555 !important; font-size: 0.8em;}
body dt{font-weight:bold !important;margin-left:1em !important;}
body dd{margin-left:2em !important;margin-bottom:1em !important;}
body table{margin:1em 0 !important;}
body table{margin:1em 0 !important;}
body table th{border-bottom:1px solid #bbb !important;padding:.2em 1em !important;}
body table td{border-bottom:1px solid #ddd !important;padding:.2em 1em !important;}
body pre{margin:1em 0;font-size:22px;background-color:#eee;border:1px solid #ddd;padding:5px;color:#444;overflow:auto;-webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
body pre::-webkit-scrollbar{height:8px;width:8px;}
body pre::-webkit-scrollbar-track-piece{margin-bottom:10px;background-color:#e5e5e5;border-bottom-left-radius:4px 4px;border-bottom-right-radius:4px 4px;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;}
body pre::-webkit-scrollbar-thumb:vertical{height:25px;background-color:#ccc;-webkit-border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(255,255,255,1);}
body pre::-webkit-scrollbar-thumb:horizontal{width:25px;background-color:#ccc;-webkit-border-radius:4px;}
body a code,body a:link code,body a:visited code{color:#4183c4 !important;}
body img{max-width:100%;}
body pre.console{margin:1em 0 !important;font-size:12px !important;background-color:black !important;padding:.5em !important;line-height:1.5em !important;color:white !important;}
body pre.console code{padding:0 !important;font-size:12px !important;background-color:black !important;border:none !important;color:white !important;}
body pre.console span{color:#888 !important;}
body pre.console span.command{color:yellow !important;}
body .frame{margin:0;display:inline-block;}
body .frame img{display:block;}
body .frame>span{display:block;border:1px solid #aaa;padding:4px;}
body .frame span span{display:block;font-size:10pt;margin:0;padding:4px 0 2px 0;text-align:center;line-height:10pt;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
body .float-left{float:left;padding:.5em 1em .25em 0;}
body .float-right{float:right;padding:.5em 0 .25em 1em;}
body .align-left{display:block;text-align:left;}
body .align-center{display:block;text-align:center;}
body .align-right{display:block;text-align:right;}


/* COMMON STEP STYLES */

.step {
    width: 900px;
    padding: 40px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;

    font-family: 'PT Serif', georgia, serif;

    font-size: 48px;
    line-height: 1.5;
}

/* fade out inactive slides */

.step {
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.step:not(.active) {
    opacity: 0.3;
}

/*
 * SLIDE STEP STYLES
 *
 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
 *
 * ;)
 */

.slide {
    display: block;

    width: 900px;
    height: 700px;

    padding: 40px 60px;

    border-radius: 10px;

    background-color: white;

    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .3);

    font-family: 'Open Sans', Arial, sans-serif;

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    font-size: 30px;
    line-height: 36px;

    letter-spacing: -1px;
}

.slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
}

.slide q strong {
    white-space: nowrap;
}


/* IMPRESS NOT SUPPORTED STYLES */

.fallback-message {
    font-family: sans-serif;
    line-height: 1.3;

    display: none;
    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;

    border-radius: 10px;
    border: 1px solid #E4C652;
    background: #EEDC94;
}

.fallback-message p {
    margin-bottom: 10px;
}

.impress-not-supported .step {
    position: relative;
    opacity: 1;
    margin: 20px auto;
}

.impress-not-supported .fallback-message {
    display: block;
}

## tmpl.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>

    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
    <meta name="author" content="Bartek Szopka" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

    <link href="style.css" rel="stylesheet" />
</head>
<body>


<div id="impress" class="impress-not-supported">

    <div class="fallback-message">
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 and Internet Explorer 10 <i>should</i> also handle it.</p>
    </div>

    {{#each slides}}
      <div class="step slide slide-{{index}}" data-x="{{x}}" data-y="{{y}}">
        {{{ content }}}
      </div>
    {{/each}}

</div>

<script src="js/impress.js"></script>

</body>
</html>


	// simple markdown to prez converter

	// this uses the really neat impress.js as a presentation framework support.


	// slides are delimited by h3 level title.


	var fs = require('fs'),
	path = require('path'),
	util = require('util'),
	hbs = require('handlebars'),
	md = require('github-flavored-markdown');

	var source = fs.readFileSync(path.join(__dirname, 'md-to-prez.md'), 'utf8'),
	template = hbs.compile(fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8'));

	var slides = source.split(/###.+/gim),
	titles = source.match(/###.+/gim);

	slides.forEach(function(part, i) {
	console.log([titles[i], part, md.parse(part)].join('\n'));
	});

	slides = slides.map(function(slide, i) {
	return {
	content: md.parse([titles[i - 1], slide].join('\n')),
	index: i,

	// here, the only used data-attributes are x and y. Others may be too, just needs to adapt our template
	// A nice to have thing would be a way to set them per slides, directly in the markdown content
	x: i * 1000,
	y: -1500,
	z: i,
	scale: i,
	'rotate-x': i * 3,
	'rotate-y': i
	};
	});

	// create the index.html file, based on the index.html (kindof) template
	var output = template({
	slides: slides
	});

	fs.writeFileSync(path.join(__dirname, 'prez.html'), output);
	/*
	* HTML5 ✰ Boilerplate
	*
	* What follows is the result of much research on cross-browser styling.
	* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
	* Kroc Camen, and the H5BP dev community and team.
	*
	* Detailed information about this CSS: h5bp.com/css
	*
	* ==\|== normalize ==========================================================
	*/


	/* =============================================================================
	HTML5 display definitions
	========================================================================== */

	article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
	audio, canvas, video { display: inline-block; display: inline; zoom: 1; }
	audio:not([controls]) { display: none; }
	[hidden] { display: none; }


	/* =============================================================================
	Base
	========================================================================== */

	/*
	* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
	* 2. Force vertical scrollbar in non-IE
	* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
	*/

	html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

	body { margin: 0; font-size: 1em; line-height: 1.4; }

	body, button, input, select, textarea { font-family: sans-serif; color: #222; }

	/*
	* Remove text-shadow in selection highlight: h5bp.com/i
	* These selection declarations have to be separate
	* Also: hot pink! (or customize the background color to match your design)
	*/

	::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
	::selection { background: #fe57a1; color: #fff; text-shadow: none; }


	/* =============================================================================
	Links
	========================================================================== */

	a { color: #00e; }
	a:visited { color: #551a8b; }
	a:hover { color: #06e; }
	a:focus { outline: thin dotted; }

	/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
	a:hover, a:active { outline: 0; }


	/* =============================================================================
	Typography
	========================================================================== */

	abbr[title] { border-bottom: 1px dotted; }

	b, strong { font-weight: bold; }

	blockquote { margin: 1em 40px; }

	dfn { font-style: italic; }

	hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

	ins { background: #ff9; color: #000; text-decoration: none; }

	mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

	/* Redeclare monospace font family: h5bp.com/j */
	pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

	/* Improve readability of pre-formatted text in all browsers */
	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: 85%; }

	/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
	sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }


	/* =============================================================================
	Lists
	========================================================================== */

	ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
	dd { margin: 0 0 0 40px; }
	nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


	/* =============================================================================
	Embedded content
	========================================================================== */

	/*
	* 1. Improve image quality when scaled in IE7: h5bp.com/d
	* 2. Remove the gap between images and borders on image containers: h5bp.com/e
	*/

	img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

	/*
	* Correct overflow not hidden in IE9
	*/

	svg:not(:root) { overflow: hidden; }


	/* =============================================================================
	Figures
	========================================================================== */

	figure { margin: 0; }


	/* =============================================================================
	Forms
	========================================================================== */

	form { margin: 0; }
	fieldset { border: 0; margin: 0; padding: 0; }

	/* Indicate that 'label' will shift focus to the associated form element */
	label { cursor: pointer; }

	/*
	* 1. Correct color not inheriting in IE6/7/8/9
	* 2. Correct alignment displayed oddly in IE6/7
	*/

	legend { border: 0; *margin-left: -7px; padding: 0; }

	/*
	* 1. Correct font-size not inheriting in all browsers
	* 2. Remove margins in FF3/4 S5 Chrome
	* 3. Define consistent vertical alignment display in all browsers
	*/

	button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

	/*
	* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
	*/

	button, input { line-height: normal; }

	/*
	* 1. Display hand cursor for clickable form elements
	* 2. Allow styling of clickable form elements in iOS
	* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
	*/

	button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

	/*
	* Consistent box sizing and appearance
	*/

	input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
	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 { -webkit-appearance: none; }

	/*
	* Remove inner padding and border in FF3/4: h5bp.com/l
	*/

	button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

	/*
	* 1. Remove default vertical scrollbar in IE6/7/8/9
	* 2. Allow only vertical resizing
	*/

	textarea { overflow: auto; vertical-align: top; resize: vertical; }

	/* Colors for form validity */
	input:valid, textarea:valid { }
	input:invalid, textarea:invalid { background-color: #f0dddd; }


	/* =============================================================================
	Tables
	========================================================================== */

	table { border-collapse: collapse; border-spacing: 0; }
	td { vertical-align: top; }


	/* ==\|== media queries ======================================================
	PLACEHOLDER Media Queries for Responsive Design.
	These override the primary ('mobile first') styles
	Modify as content requires.
	========================================================================== */

	@media only screen and (min-width: 480px) {
	/* Style adjustments for viewports 480px and over go here */

	}

	@media only screen and (min-width: 768px) {
	/* Style adjustments for viewports 768px and over go here */

	}



	/* ==\|== non-semantic helper classes ========================================
	Please define your styles before this section.
	========================================================================== */

	/* For image replacement */
	.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
	.ir br { display: none; }

	/* Hide from both screenreaders and browsers: h5bp.com/u */
	.hidden { display: none !important; visibility: hidden; }

	/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
	.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
	.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

	/* Hide visually and from screenreaders, but maintain layout */
	.invisible { visibility: hidden; }

	/* Contain floats: h5bp.com/q */
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { *zoom: 1; }

	/* ==\|== print styles =======================================================
	Print styles.
	Inlined to avoid required HTTP connection: h5bp.com/r
	========================================================================== */

	@media print {
	* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
	a, a:visited { 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; } /* h5bp.com/t */
	tr, img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
	@page { margin: 0.5cm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
	}




	/ demo specific css /

	body {

	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ECE9E9));
	background-image: -webkit-linear-gradient(top, #ffffff, #ECE9E9);
	background-image: -moz-linear-gradient(top, #ffffff, #ECE9E9);
	background-image: -ms-linear-gradient(top, #ffffff, #ECE9E9);
	background-image: -o-linear-gradient(top, #ffffff, #ECE9E9);
	background-image: linear-gradient(top, #ffffff, #ECE9E9);
	}

	/ gh style, credits to github guys. /
	body h1,body h2,body h3,body h4,body h5,body h6{border:0 !important;}
	body h1:first-child, body h2:first-child, body h3:first-child{margin-top:0 !important;padding-top:.25em !important;border-top:none !important;}
	body h2{font-size:150% !important;margin-top:1.5em !important;padding-top:.5em !important;}
	body h3{margin-top:1em !important;}
	body h1, body h2, body h3, body h4,body h5, body h6 { text-align: left!important; margin-right: 0;!important; margin-left: 0;!important; width: 100%!important; position:relative;}
	body p{margin:1em 0 !important;line-height:1.5em !important;}
	body a.absent{color:#a00;}
	body ul,#wiki-form .content-body ul{margin:1em 0 1em 2em !important;}
	body ol,#wiki-form .content-body ol{margin:1em 0 1em 2em !important;}
	body ul li,#wiki-form .content-body ul li,body ol li,#wiki-form .content-body ol li{margin-top:.5em;margin-bottom:.5em;}
	body ul ul,body ul ol,body ol ol,body ol ul,#wiki-form .content-body ul ul,#wiki-form .content-body ul ol,#wiki-form .content-body ol ol,#wiki-form .content-body ol ul{ margin: 0 !important; }
	body blockquote{margin:1em 0 !important;border-left:5px solid #ddd !important;padding-left:.6em !important;color:#555 !important; font-size: 0.8em;}
	body dt{font-weight:bold !important;margin-left:1em !important;}
	body dd{margin-left:2em !important;margin-bottom:1em !important;}
	body table{margin:1em 0 !important;}
	body table{margin:1em 0 !important;}
	body table th{border-bottom:1px solid #bbb !important;padding:.2em 1em !important;}
	body table td{border-bottom:1px solid #ddd !important;padding:.2em 1em !important;}
	body pre{margin:1em 0;font-size:22px;background-color:#eee;border:1px solid #ddd;padding:5px;color:#444;overflow:auto;-webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
	body pre::-webkit-scrollbar{height:8px;width:8px;}
	body pre::-webkit-scrollbar-track-piece{margin-bottom:10px;background-color:#e5e5e5;border-bottom-left-radius:4px 4px;border-bottom-right-radius:4px 4px;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;}
	body pre::-webkit-scrollbar-thumb:vertical{height:25px;background-color:#ccc;-webkit-border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(255,255,255,1);}
	body pre::-webkit-scrollbar-thumb:horizontal{width:25px;background-color:#ccc;-webkit-border-radius:4px;}
	body a code,body a:link code,body a:visited code{color:#4183c4 !important;}
	body img{max-width:100%;}
	body pre.console{margin:1em 0 !important;font-size:12px !important;background-color:black !important;padding:.5em !important;line-height:1.5em !important;color:white !important;}
	body pre.console code{padding:0 !important;font-size:12px !important;background-color:black !important;border:none !important;color:white !important;}
	body pre.console span{color:#888 !important;}
	body pre.console span.command{color:yellow !important;}
	body .frame{margin:0;display:inline-block;}
	body .frame img{display:block;}
	body .frame>span{display:block;border:1px solid #aaa;padding:4px;}
	body .frame span span{display:block;font-size:10pt;margin:0;padding:4px 0 2px 0;text-align:center;line-height:10pt;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
	body .float-left{float:left;padding:.5em 1em .25em 0;}
	body .float-right{float:right;padding:.5em 0 .25em 1em;}
	body .align-left{display:block;text-align:left;}
	body .align-center{display:block;text-align:center;}
	body .align-right{display:block;text-align:right;}


	/* COMMON STEP STYLES */

	.step {
	width: 900px;
	padding: 40px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	font-family: 'PT Serif', georgia, serif;

	font-size: 48px;
	line-height: 1.5;
	}

	/* fade out inactive slides */

	.step {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
	}

	.step:not(.active) {
	opacity: 0.3;
	}

	/*
	* SLIDE STEP STYLES
	*
	* inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
	*
	* ;)
	*/

	.slide {
	display: block;

	width: 900px;
	height: 700px;

	padding: 40px 60px;

	border-radius: 10px;

	background-color: white;

	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	border: 1px solid rgba(0, 0, 0, .3);

	font-family: 'Open Sans', Arial, sans-serif;

	color: rgb(102, 102, 102);
	text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

	font-size: 30px;
	line-height: 36px;

	letter-spacing: -1px;
	}

	.slide q {
	display: block;
	font-size: 50px;
	line-height: 72px;

	margin-top: 100px;
	}

	.slide q strong {
	white-space: nowrap;
	}


	/* IMPRESS NOT SUPPORTED STYLES */

	.fallback-message {
	font-family: sans-serif;
	line-height: 1.3;

	display: none;
	width: 780px;
	padding: 10px 10px 0;
	margin: 20px auto;

	border-radius: 10px;
	border: 1px solid #E4C652;
	background: #EEDC94;
	}

	.fallback-message p {
	margin-bottom: 10px;
	}

	.impress-not-supported .step {
	position: relative;
	opacity: 1;
	margin: 20px auto;
	}

	.impress-not-supported .fallback-message {
	display: block;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>impress.js \| presentation tool based on the power of CSS3 transforms and transitions in modern browsers \| by Bartek Szopka @bartaz</title>

	<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
	<meta name="author" content="Bartek Szopka" />

	<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold\|PT+Sans:400,700,400italic,700italic\|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

	<link href="style.css" rel="stylesheet" />
	</head>
	<body>


	<div id="impress" class="impress-not-supported">

	<div class="fallback-message">
	<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
	<p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 and Internet Explorer 10 <i>should</i> also handle it.</p>
	</div>

	{{#each slides}}
	<div class="step slide slide-{{index}}" data-x="{{x}}" data-y="{{y}}">
	{{{ content }}}
	</div>
	{{/each}}

	</div>

	<script src="js/impress.js"></script>

	</body>
	</html>