/*

 __  __ _              __     __            ____  _             _     
|  \/  (_)_   _  ___   \ \   / /_ _ _ __   / ___|| |_ ___ _ __ (_)___ 
| |\/| | | | | |/ _ \   \ \ / / _` | '_ \  \___ \| __/ _ \ '_ \| / __|
| |  | | | |_| | (_) |   \ V / (_| | | | |  ___) | ||  __/ | | | \__ \
|_|  |_|_|\__, |\___/     \_/ \__,_|_| |_| |____/ \__\___|_| |_|_|___/
          |___/                                                       

TOTALLY NOT A VIRUS. TRUST ME, I'M A DOLPHIN 
  WWW, 2013
  Collector Edition 3/5 - JoDi (Joan Heemskerk & Dirk Paesmans).

 made with <3 by Miyö Van Stenis - miyovanstenis.com
          
****Size errors can be solved reloading the browser****

 */

body { 
    margin:0;
 	overflow:hidden; }


canvas {
 position:absolute;
}

h1, h2 { 
    position: relative; 
    float: left;
    font-size:150%;
	clear: both;
	color:#3F3;
}

@-webkit-keyframes typing {
    from { width: 100% }
    to { width:0 }
}

h1 span {
    position:absolute;
    top:0;
    right:0;
    width:0;
    background: black; /* same as background */
    border-left: .1em solid black;
    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}​

/* Same Story as above. */
@-webkit-keyframes typing2 {
    from { width: 0% }
    to { width:100% }
}

div { float: left; clear: both; }

div h1 {
    width:100%;
	overflow: hidden;
	white-space: nowrap;
    /*border-right: .1em solid black;*/
	background: black;
    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    -webkit-animation: typing2 17s steps(28, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing2 17s steps(28, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}​

@-webkit-keyframes typing {
    from { width: 100% }
    to { width:0 }
}

@-webkit-keyframes typing2 {
    from { width: 0% }
    to { width:100% }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes typing {
    from { width: 100% }
    to { width:0 }
}

@-moz-keyframes typing2 {
    from { width: 0% }
    to { width:100% }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@keyframes typing {
    from { width: 100% }
    to { width:0 }
}

@keyframes typing2 {
    from { width: 0% }
    to { width:100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

body {

}

.code-editor:before,
.code-editor:after,
.code-editor span.control:before,
.code-editor span.after:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: '';
	position: absolute;
	z-index: 1;
	-webkit-transition: all .5s ease-in-out;
    -moz-transition: wall .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.code-editor {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 40px auto 0 auto;
   	width: 750px; 
   	text-align: left;
   	background-color: #473431;
   	border-radius: 0 0 5px 5px;
   	overflow: auto;
   	-webkit-transition: all .5s ease-in-out;
    -moz-transition: wall .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.code-editor:before {
	content: 'Code Editor';
	font-family: 'Consolas';
	color: #222;
	padding-top: 6px; 
	text-align: center;
	top: 25px;
	width: 750px;
	height: 30px;
	background-color: #fafafa;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}

.code-editor span.control:before {
	content: '';
	top: 34px;
	z-index: 2;
	padding: 6px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	-webkit-border-radius: 20px;
}

.code-editor span.control:nth-child(1):before {
	margin-left: 15px;
	background-color: #df6963;
	
}

.code-editor span.control:nth-child(2):before {
	margin-left: 35px;
	background-color: #f5e18a;
	
}

.code-editor span.control:nth-child(3):before {
	margin-left: 55px;
	background-color: #97c38a;
}

/* -- iPad Screen -- */
@media only screen and (min-width: 480px) and (max-width: 768px) {
	.code-editor {
   		width: 500px; 
	}

	.code-editor:before {
		width: 500px;
	}
}

/* -- iPhone Screen -- */
@media only screen and (max-width: 479px) {
	.code-editor {
		width: 300px;
	}	

	.code-editor:before {
		width: 300px;
	}
}

/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #ccc;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0em 0;
  height: 500px;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #473431;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  -moz-border-radius: .3em;
  -o-border-radius: .3em;
  -webkit-border-radius: .3em;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.punctuation {
  color: #ccc;
}


.token.tag,
.token.attr-name,
.token.namespace {
  color: #e2777a;
}

.token.function-name {
  color: #6196cc;
}


.token.boolean,
.token.number,
.token.function {
  color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #cc99cd;
}

.token.string,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}

.token.operator,
.token.entity,
.token.url
{
  color: #67cdcc;
}


.token.important {
  font-weight: bold;
}

.token.entity {
  cursor: help;
}

pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
	padding-bottom: 1px;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;

	font-size: 100%;
	left: -13em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	background-color: #322422;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

.line-numbers-rows > span {
	pointer-events: none;
	display: block;
	counter-increment: linenumber;
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #999;
	display: block;
	padding-right: 0.8em;
	text-align: right;
}

.mac {
  $width: 500px;
  
  box-sizing: border-box;
  width: $width;
  height: ($width/16)*9;
  background: #E8EBF0;
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto;
  position: relative;
  
  .viewport {
    background: url('http://cdn.getforge.com/hammerformac.com/1383779662/assets/images/mac-linen.jpg');
    height: 100%;
    position: relative;
    -webkit-backface-visibility: hidden;
    $animation-time: 0.5s;
    
    .menubar {
      background: url('http://cdn.getforge.com/hammerformac.com/1383779662/assets/images/mac-menubar.jpg');
      width: 100%;
      height: 3%;
      position: absolute;
      top: 0;
      background-repeat: no-repeat;
      background-size: 100%;
      opacity: 1;
      @include transition( all $animation-time );
    }
    .screen {
      width: 100%;
      height: 100%;
      background: url(http://cdn.getforge.com/hammerformac.com/1383779662/assets/images/mac-desktop.jpg);
      background-size: 100%;
      position: absolute;
      bottom: 0;
      @include transition( all $animation-time );
    }
  
    .screenshots {
      img {
        position: absolute;
        width: 40%;
        cursor: pointer;
        top: 50px;
        
        @include box-shadow(0px 1px 7px);
        @include transition( all $animation-time );
        
        $default-position: 90px;
        
        &:nth-child(1) {
          left: $default-position;
        }

        &:nth-child(2) {
          right: $default-position;
        }
      }
    }

    &:hover {
      $hover-position: 20px;
      
      .menubar { opacity: 0; }
      .screen {
        @include transform( scale(0.7) )
      }

      .screenshots {
        img {
          &:nth-child(1) { left: $hover-position; }
          &:nth-child(2) { right: $hover-position; }
        }
      }
    }
  }

  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 49%;
    width: 7px;
    height: 7px;
    
    border-radius: 50%;
    background: #95A5A6;
  }

  .bottom {
    position: absolute;
    background: #F8F8F8;
    width: 125%;
    height: 13px;
    bottom: 0;
    left: -12.5%;
    border-radius: 0 0 30px 30px;

    &:after {
      display: block;
      content: "";
      width: 92px;
      height: 7px;
      background: #C3C7C7;
      margin: 0 auto;
      border-radius: 0px 0px 10px 10px;
    }
  }
}

/*


██████████████████████████████████████████████████████████████████████████████████████████████████████████████
█░░░░░░░░░░░░███░░░░░░░░░░░░░░█░░░░░░█████████░░░░░░░░░░░░░░█░░░░░░██░░░░░░█░░░░░░░░░░█░░░░░░██████████░░░░░░█
█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░█████████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀░░█░░▄▀░░░░░░░░░░██░░▄▀░░█
█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░█████████░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█░░░░▄▀░░░░█░░▄▀▄▀▄▀▄▀▄▀░░██░░▄▀░░█
█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░███░░▄▀░░███░░▄▀░░░░░░▄▀░░██░░▄▀░░█
█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░▄▀░░███░░▄▀░░███░░▄▀░░██░░▄▀░░██░░▄▀░░█
█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░███░░▄▀░░███░░▄▀░░██░░▄▀░░██░░▄▀░░█
█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░░░░░░░░░█░░▄▀░░░░░░▄▀░░███░░▄▀░░███░░▄▀░░██░░▄▀░░██░░▄▀░░█
█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░█████████░░▄▀░░██░░▄▀░░███░░▄▀░░███░░▄▀░░██░░▄▀░░░░░░▄▀░░█
█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░░░▄▀░░░░█░░▄▀░░██░░▄▀▄▀▄▀▄▀▄▀░░█
█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀░░█░░▄▀░░██░░░░░░░░░░▄▀░░█
█░░░░░░░░░░░░███░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░█████████░░░░░░██░░░░░░█░░░░░░░░░░█░░░░░░██████████░░░░░░█
██████████████████████████████████████████████████████████████████████████████████████████████████████████████

I'm a Dolphin

̱̗͚̱̹͙͙̌͆ͫ

*/