/*!
 * jmpress.js v0.4.3
 * http://shama.github.com/jmpress.js
 *
 * A jQuery plugin to build a website on the infinite canvas.
 *
 * Copyright 2012 Kyle Robinson Young @shama & Tobias Koppers @sokra
 * Licensed MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Based on the foundation laid by Bartek Szopka @bartaz
 */
.will-expand {
	-webkit-transition: all 1s;
	-moz-transition:    all 1s;
	-ms-transition:     all 1s;
	-o-transition:      all 1s;
	transition:         all 1s;
	opacity: 0;
	-webkit-transform: translate3d(0,0,1px) scale(0.7,1);
	-moz-transform:    translate3d(0,0,1px) scale(0.7,1);
	-ms-transform:     translate3d(0,0,1px) scale(0.7,1);
	-o-transform:      translate3d(0,0,1px) scale(0.7,1);
	transform:         translate3d(0,0,1px) scale(0.7,1);
}
.do-expand {
	opacity: 1;
	-webkit-transform: translate3d(0,0,1px) scale(1,1);
	-moz-transform:    translate3d(0,0,1px) scale(1,1);
	-ms-transform:     translate3d(0,0,1px) scale(1,1);
	-o-transform:      translate3d(0,0,1px) scale(1,1);
	transform:         translate3d(0,0,1px) scale(1,1);
}
.has-expand {
	-webkit-transform: none;
	-moz-transform:    none;
	-ms-transform:     none;
	-o-transform:      none;
	transform:         none;
}
.will-drive-right, .will-drive-left {
	position: relative;
	-webkit-transition: opacity 0.6s, left 1s;
	-moz-transition:    opacity 0.6s, left 1s;
	-ms-transition:     opacity 0.6s, left 1s;
	-o-transition:      opacity 0.6s, left 1s;
	transition:         opacity 0.6s, left 1s;
	opacity: 0;
}
.will-drive-right {
	left: -300px;
}
.will-drive-left {
	left: 300px;
}
.will-drive-down, .will-drive-up {
	position: relative;
	-webkit-transition: opacity 0.6s, top 1s;
	-moz-transition:    opacity 0.6s, top 1s;
	-ms-transition:     opacity 0.6s, top 1s;
	-o-transition:      opacity 0.6s, top 1s;
	transition:         opacity 0.6s, top 1s;
	opacity: 0;
}
.will-drive-down {
	top: -300px;
}
.will-drive-up {
	top: 300px;
}
.do-drive-up, .do-drive-down {
	opacity: 1;
	top: 0px;
}
.do-drive-right, .do-drive-left {
	opacity: 1;
	left: 0px;
}
.will-appear {
	opacity: 0;
}
.do-appear {
	opacity: 1;
}
.will-warp-right, .will-warp-left {
	position: relative;
	-webkit-transition: opacity 0.2s, left 0.5s ease-in-out;
	-moz-transition:    opacity 0.2s, left 0.5s ease-in-out;
	-ms-transition:     opacity 0.2s, left 0.5s ease-in-out;
	-o-transition:      opacity 0.2s, left 0.5s ease-in-out;
	transition:         opacity 0.2s, left 0.5s ease-in-out;
	opacity: 0;
}
.will-warp-right {
	left: -600px;
}
.will-warp-left {
	left: 600px;
}
.will-warp-down, .will-warp-up {
	position: relative;
	-webkit-transition: opacity 0.2s, top 0.5s ease-in-out;
	-moz-transition:    opacity 0.2s, top 0.5s ease-in-out;
	-ms-transition:     opacity 0.2s, top 0.5s ease-in-out;
	-o-transition:      opacity 0.2s, top 0.5s ease-in-out;
	transition:         opacity 0.2s, top 0.5s ease-in-out;
	opacity: 0;
}
.will-warp-down {
	top: -600px;
}
.will-warp-up {
	top: 600px;
}
.do-warp-up, .do-warp-down {
	opacity: 1;
	top: 0px;
}
.do-warp-right, .do-warp-left {
	opacity: 1;
	left: 0px;
}
.will-zoom {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition:    all 1s ease-in-out;
	-ms-transition:     all 1s ease-in-out;
	-o-transition:      all 1s ease-in-out;
	transition:         all 1s ease-in-out;
	opacity: 0;
	-webkit-transform: translate3d(0,0,1px) scale(10,10);
	-moz-transform:    translate3d(0,0,1px) scale(10,10);
	-ms-transform:     translate3d(0,0,1px) scale(10,10);
	-o-transform:      translate3d(0,0,1px) scale(10,10);
	transform:         translate3d(0,0,1px) scale(10,10);
}
.do-zoom {
	opacity: 1;
	-webkit-transform: translate3d(0,0,1px) scale(1,1);
	-moz-transform:    translate3d(0,0,1px) scale(1,1);
	-ms-transform:     translate3d(0,0,1px) scale(1,1);
	-o-transform:      translate3d(0,0,1px) scale(1,1);
	transform:         translate3d(0,0,1px) scale(1,1);
}
.has-zoom {
	-webkit-transform: none;
	-moz-transform:    none;
	-ms-transform:     none;
	-o-transform:      none;
	transform:         none;
}
.will-fade {
	-webkit-transition: opacity 1s;
	-moz-transition:    opacity 1s;
	-ms-transition:     opacity 1s;
	-o-transition:      opacity 1s;
	transition:         opacity 1s;
	opacity: 0;
}
.will-fade-slow {
	-webkit-transition: opacity 2s;
	-moz-transition:    opacity 2s;
	-ms-transition:     opacity 2s;
	-o-transition:      opacity 2s;
	transition:         opacity 2s;
	opacity: 0;
}
.will-fade-fast {
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-ms-transition:     opacity 0.5s;
	-o-transition:      opacity 0.5s;
	transition:         opacity 0.5s;
	opacity: 0;
}
.do-fade, .do-fade-slow, .do-fade-fast {
	opacity: 1;
}
text {
  font-size: 11px;
  pointer-events: none;
}
text.parent {
  fill: #333333;
}
circle {
  fill: #ccc;
  stroke: #333333;
  pointer-events: all;
}
circle.parent {
  fill: #222;
  fill-opacity: .1;
  stroke: #fff;
}
circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}
circle.child {
  pointer-events: none;
}
#home {
    background-image: url(../images/pre/linuxday_fullcolor.png);
    background-size: 50%;
    background-position: -30% 200px;
    background-repeat:no-repeat;
}
#alca {
    background-image: url(../images/pre/alca_logo.png);
    background-size:300px;
    background-position: 300px 300px;
    background-repeat:no-repeat;
}
#what {
    background-image: url(../images/pre/what.png);
    background-size: auto 80%;
    background-repeat:no-repeat;
    background-position: 40px 86px;
    font-size: 1.8em;
    color: #f3f3f3;
}
#work-on-beach {
    background-image: url(../images/pre/beach.png);
    background-size:110%;
    background-position: -20px -140px;
    background-repeat:no-repeat;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
#work-blackhat {
    background-image: url(../images/pre/pirate2.png);
    background-size: 60%;
    background-position: -20px 100px;
    background-repeat:no-repeat;
    background-color: #aaa;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
#work-businessman {
    background-image: url(../images/pre/ballmer.jpg);
    background-size: 100%;
    background-position: 0px -50px; 
    background-repeat:no-repeat;
    font-size: 1em;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
#choose-your-fighter {
    background-image: url(../images/pre/choose_your_fighter.png);
    background-size: auto 100%;
    background-position: 50% 0px; 
    background-repeat:no-repeat;
    background-color: #5B5B5B;
    color: white;
}
.block.character-desc {
    background: url(../images/pre/mk_texture.png);
    background-size: auto 100%;
    background-position: 50% 0px; 
    background-repeat:no-repeat;
    background-color: #5B5B5B;
    
    padding-top: 180px;
    font-size: 1.5em;
    color: white;
}
.block.character-desc img {
    background-color:#A5BFD2;
    background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(90deg, white 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
    background-image: -webkit-linear-gradient(white 2px, transparent 2px),
    -webkit-linear-gradient(0deg, white 2px, transparent 2px),
    -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    -webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: -webkit-linear-gradient(white 2px, transparent 2px),
    -webkit-linear-gradient(0deg, white 2px, transparent 2px),
    -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    -webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
}
body {
    background-color:#eee;
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
    background-image: -webkit-linear-gradient(white 2px, transparent 2px),
    -webkit-linear-gradient(0deg, white 2px, transparent 2px),
    -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    -webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: -webkit-linear-gradient(white 2px, transparent 2px),
    -webkit-linear-gradient(0deg, white 2px, transparent 2px),
    -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  -webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
*/
}
#fake-tools > h1, #fake-tools > .step > h1 {
    font-size: 3em;
}
#matrix {
    width: 100%;
    height: 330px;
    background-image: url(../images/pre/fight.jpg);
    background-size: 100%;
    background-repeat:no-repeat;
}
#matrix-iphone {
    width: 100%;
    height: 330px;
    background-image: url(../images/pre/iphone_fight.png);
    background-size: 100%;
    background-repeat:no-repeat;
}
#matrix-ipad {
    width: 100%;
    height: 330px;
    background-image: url(../images/pre/ipad_fight.png);
    background-size: 100%;
    background-repeat:no-repeat;
}
#matrix-macbook {
    width: 100%;
    height: 330px;
    background-image: url(../images/pre/macbook_fight.png);
    background-size: 100%;
    background-repeat:no-repeat;
}
#matrix-laptop {
    width: 100%;
    height: 330px;
    background-image: url(../images/pre/laptop_fight.png);
    background-size: 100%;
    background-repeat:no-repeat;
}
#iphone {    
    background-image: url(../images/pre/iphone.png);
    background-size: 100%;
    background-position: -30% 160px;
    background-repeat:no-repeat;
    font-size: 2em;
}
#ipad {    
    background-image: url(../images/pre/ipad.png);
    background-size: 100%;
    background-position: -30% 160px;
    background-repeat:no-repeat;
    font-size: 2em;
}
#macbook {    
    background-image: url(../images/pre/macbook.jpg);
    background-size: 100%;
    
    background-repeat:no-repeat;
    font-size: 2em;
}
#laptop {
    background-image: url(../images/pre/hacker_laptop.jpg);
    background-size: 106%;
    background-position: -50px -120px;
    background-repeat:no-repeat;
    font-size: 1em;
}
#brain {    
    background-image: url(../images/pre/brain.jpg);
    background-size:100%;
    background-repeat:no-repeat;
    font-size: 2em;
    color: white;
}
#helloworld {
    background-image: url(../images/pre/learn.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    font-size: 2em;
    color: white;
}
#mipiace {
    background-image: url(../images/pre/mipiace.png);
    background-size: auto;
    background-position: 50% 300px;
    background-repeat:no-repeat;
}
#mipiace h1:first-child {
    background: #4F71A2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    padding: 8px;
    text-shadow:
       0px 0px 0 #ddd,
     -0px -0px 0 #ddd,  
      0px -0px 0 #ddd,
      -0px 0px 0 #ddd,
       0px 0px 0 #ddd;    
}
#iwillnotfix {
    background-image: url(../images/pre/will-not-fix.png);
    background-size: 55%;
    background-position: 40px 110px;
    background-repeat:no-repeat;
    font-size: 1.5em;
    color: #f3f3f3;
}
#learn2debug {
    background-image: url(../images/pre/debug.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    color: white;
    text-shadow:
}
#last {
    z-index: -3000;
    height: 600px;
}
#last h1, #last h4 {
    width: 800px;
    margin: 2px;
    padding: 2px;
}
.bg-white {
    background-color: white !important;
}
#matrix-animation{
	margin: 1em auto;
	font-family: Katakana;
    font-size: 2em;
	width: 90%;
	height: 440px;
	overflow: hidden;
	background: #000;
	background-image: -webkit-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
	background-image: -moz-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
	color: rgba(0, 255, 0, .7);
	text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
	position: relative;	
}
@-webkit-keyframes fade{
	0%   { opacity: 1; }
	100% { opacity: 0.5; }
}
@-webkit-keyframes fall{
	from {top: -250px;}
	to 	{top: 300px;}
}
@-moz-keyframes fade{
	0%   { opacity: 1; }
	100% { opacity: 0; }
}
@-moz-keyframes fall{
	from {top: -250px;}
	to 	{top: 300px;}
}
.step #matrix-animation div{
	
	position: absolute;	
	top: 0;
	
	-webkit-transform-origin: 0%;
	-webkit-transform: rotate(90deg); 
	-moz-transform-origin: 0%;
	-moz-transform: rotate(90deg); 
}
.step.active #matrix-animation div {	
	
	-webkit-animation-name: fall, fade;			
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-direction: normal; 
	-webkit-animation-timing-function: ease-out;
	-moz-animation-name: fall, fade;			
	-moz-animation-iteration-count: infinite; 
	-moz-animation-direction: normal; 
	-moz-animation-timing-function: ease-out;
}
#matrix-animation span{
	color: rgb(0, 255, 0);
	text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}
.f1{
	font-size: 1.2em;
}
.f2{
	font-size: .9em;
}
.c1{
	color: rgba(0, 255, 0, .5);
}
.d1{
	-webkit-animation-duration: 4s;
	-moz-animation-duration: 4s;
}
.d2{
	-webkit-animation-duration: 6s;
	-moz-animation-duration: 6s;
}
.d3{
	-webkit-animation-duration: 8s;
	-moz-animation-duration: 8s;
}
.d4{
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
}
.de{	
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}
@-webkit-keyframes fly-credits{
	from 	{top: 800px;}
	to {top: -1800px;}
}
@-moz-keyframes fly-credits{
	from 	{top: 800px;}
	to {top: -1800px;}
}
#last .credits {
    z-index: -3000;
    position: absolute;
    top: 800px;
    font-size: 1.5em;
}
#last.step.active .credits {
	
	-webkit-animation-name: fly-credits, fade;			
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-direction: normal; 
	-webkit-animation-timing-function: linear;
	-moz-animation-name: fly-credits, fade;			
	-moz-animation-iteration-count: infinite; 
	-moz-animation-direction: normal; 
	-moz-animation-timing-function: linear;
}
#last.step.active .credits {
    text-align: center;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
	-webkit-animation-duration: 15s;
	-moz-animation-duration: 15s;    
}
.credits dt {
    margin-top: 8px;
    font-weight: bold;
}
.credits dd {
    font-style: italic;
}
body {
	font-family: Verdana, sans-serif;
    
	min-height: 740px;
	background-color: #eee;
	-webkit-font-smoothing: antialiased;
}
a {
    color: #FBA602;
    text-decoration: none;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.middle {
    margin-top: 20%;
}
.zoom {
    transform: scale(1.5,1.5) translate(0px,50px);
    -ms-transform: scale(1.5,1.5) translate(0px,50px); 
    -webkit-transform: scale(1.5,1.5) translate(0px,50px); 
    -o-transform: scale(1.5,1.5) translate(0px,50px); 
    -moz-transform: scale(1.5,1.5) translate(0px,50px); 
}
.character-desc ul {
    list-style: none;
}
.character-desc img {
    float: left; 
    margin-right: 2%;
}
h1 {
    margin: 0;
    margin-bottom: 1em;
    color: white;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
.inset {
    width: 900px;
    height: 400px;
	font-size: 1em;
	min-height: 500px;
	display: block;
    padding: 40px 60px;
    
    
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    letter-spacing: -1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	-ms-box-sizing:     border-box;
	-o-box-sizing:      border-box;
	box-sizing:         border-box;
}
.block {
	width: 900px;
    height: 400px;
	font-size: 1em;
	min-height: 500px;
	background-color: #f3f3f3; 
	display: block;
    padding: 0px 60px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1); 
    border: 1px solid rgba(0, 0, 0, .3); 
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    letter-spacing: -1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	-ms-box-sizing:     border-box;
	-o-box-sizing:      border-box;
	box-sizing:         border-box;
}
.step {
	-webkit-transition: all 1s;
	-moz-transition:    all 1s;
	-ms-transition:     all 1s;
	-o-transition:      all 1s;
	transition:         all 1s;
}
.step:not(.active) {
    opacity: 0;
}
.step.nested-active {
    opacity: 1;
}
.hint {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0px;
	background: #333;
	color: #fff;
	text-align: right;
	padding: 10px;
	z-index: 100;
	opacity: 0;
	-webkit-transform: translateY(400px);
	-moz-transform:    translateY(400px);
	-ms-transform:     translateY(400px);
	-o-transform:      translateY(400px);
	transform:         translateY(400px);
	-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
	-moz-transition:    opacity 1s,    -moz-transform 0.5s 1s;
	-ms-transition:     opacity 1s,     -ms-transform 0.5s 1s;
	-o-transition:      opacity 1s,      -o-transform 0.5s 1s;
	transition:         opacity 1s,         transform 0.5s 1s;
}
.step-home + .hint {
	opacity: 1;
	-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
	-moz-transition:    opacity 1s 5s,    -moz-transform 0.5s;
	-ms-transition:     opacity 1s 5s,     -ms-transform 0.5s;
	-o-transition:      opacity 1s 5s,      -o-transform 0.5s;
	transition:         opacity 1s 5s,         transform 0.5s;
	-webkit-transform: translateY(0px);
	-moz-transform:    translateY(0px);
	-ms-transform:     translateY(0px);
	-o-transform:      translateY(0px);
	transform:         translateY(0px);
}
.not-supported .step {
	position: relative;
	opacity: 1;
	margin: 20px auto;
}
@media print {
	body {
		background: white;
	}
	.hint {
		display: none;
	}
	#simple {
		width: auto; 
		margin: 0 5%;
		padding: 0; 
		border: 0;
		float: none !important;
		color: black; 
		background: transparent;
	}
	.step {
		page-break-after: always;
		opacity: 1;
		clear: both;
		display: block;
		float: none !important;
		position: relative;
		margin: 20px auto;
		-webkit-transition: rotate(0deg);
		-moz-transition:    rotate(0deg);
		-ms-transition:     rotate(0deg);
		-o-transition:      rotate(0deg);
		transition:         rotate(0deg);
	}
	.step:not(.active) {
		opacity: 1;
	}
}