body {
	font: 62.5%/1 'Open Sans', sans-serif;
	padding: 0;
	margin: 0;
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  -ms-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
	color: #454460;
  background: #A5D9C9;
  background-image: none;
  background-image: none -moz-linear-gradient(left, #A5D9C9 0%, #A5D9C9 50%, #A5D9C9 100%);
  background-image: none -webkit-gradient(linear, left top, right top, color-stop(0%,#A5D9C9), color-stop(50%,#A5D9C9), color-stop(100%,#A5D9C9));
  background-image: none -webkit-linear-gradient(left, #A5D9C9 0%,#A5D9C9 50%,#A5D9C9 100%);
  background-image: none -o-linear-gradient(left, #A5D9C9 0%,#A5D9C9 50%,#A5D9C9 100%);
  background-image: none -ms-linear-gradient(left, #A5D9C9 0%,#A5D9C9 50%,#A5D9C9 100%);
  background-attachment: fixed;
}


a {
	color: #454460;
  text-decoration:underline;
  cursor: pointer;
}

a:hover,
a:focus,
a:active {
  color:#50A6AB;
  text-decoration:none;
}

h1, h2, h3, h4, h5, h6, p, pre, ul, ol {
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

h1, h2 {
	font-family: Open Sans, "Helvetica Neue", sans-serif; 
	font-weight: 400;
	margin-bottom: 0.75em;
}

h1 {
	font-size: 2.6em;
}

h2 {
	font-size: 1.8em;
	margin-top: 1.5em;
	margin-bottom: 1em;
}

h3 {
	font-size: 2.2em;
}

p, li {
	font-size: 1.6em;
	line-height: 1.3em;
}

p, ul, ol {
	margin-bottom: 1em;
}

li {
	margin-bottom: 0.2em;
}

li li, li p {
	font-size: 1em;
}

ul {
	list-style-type: none;
}

ul li {
	padding-left: 0;
}

hr {
    border:0;
    border-bottom: 1px solid #b8b7b5;
    margin: 2em 0 3em 0;
}

code {
	font-family: 'Ubuntu Mono', monospace;
	font-size: 1em;
	padding: 2px 3px;
  background-color: rgba(0,0,0,0.075);
}

/* Code highlighting theme for hijs */

pre code .keyword              { color: #FAB204; }
pre code .string, pre code .regexp { color: #E6DB74; }
pre code .class, pre code .special { color: #F8F8F2; }
pre code .number               { color: #CAE4FF; }
pre code .comment              { color: #75715E; }

.content section:after, .cf:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.ltIE9 .content section {
  clear:left;
}

pre {
  position: relative;
	font-size: 10px; /* Fixes odd issue in FF */
	-webkit-tab-size: 2;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	margin: 0 -2em 2em;
	padding: 1.5em 3em;
	border: 10px solid #E4E8EA;
  border-radius: 17px;
  -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.45) inset;
  -moz-box-shadow:    4px 4px 5px rgba(0, 0, 0, 0.45) inset;
  -o-box-shadow:    4px 4px 5px rgba(0, 0, 0, 0.45) inset;
  box-shadow:         4px 4px 5px rgba(0, 0, 0, 0.45) inset;
}

section pre.runnable {
  padding-bottom: 3.5em;
}

pre code {
	position: relative;
	padding: 0;
	display: block;
	border-radius: 0;
	border: 0;
	font-size: 1.6em;
	line-height: 1.2em;
  color: #F8F8F2;
	overflow: auto;
	overflow-y: hidden;
  word-wrap: normal;
}

/*
.run pre code {
  padding-bottom: 1em;
}
*/

header {
  background : none;
}

header,
footer {
	background-color: #454460;
	color: #fff;
	text-align: center;
}

header h1 {
	font-size: 4.2em;
	margin: 0;
  padding:  0.18em;
  text-align: left;
}
h1.title {
	font-family: Michroma, "Helvetica Neue", sans-serif;
}

header h1:after {
  position: absolute;
  content: '';
  top: 10px;
  right: 10px;
  width: 103px;
  height: 42px;
  padding:0;
  background-image: url(./svg/node_slate.svg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100%;
  background-origin: padding-box;
  background-color: transparent;
  
  -webkit-filter: none;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}


header a,
header a:hover,
header a:focus,
header a:active,
footer a,
footer a:hover,
footer a:focus,
footer a:active{
  
  color: #fff;
  
  text-decoration: none;
}



footer {
  padding: 2em;
}

footer p {
	margin: 0;
}

#navigation {
	display: block;
  text-transform: uppercase;
	margin: 0;
	padding: 1em;
	border-top: 1px #8DB8AF solid;
	text-align: left;
	overflow: hidden;
}

#navigation.show-subnav-button {
  padding-bottom:0.5em;
}

section.overview {
  padding:2em 3.5em;
  border-radius: 7px;
}

pre,
pre code {
  color: #9CCDD2;
	background-color: #2f3b42;
}

#navigation, section.overview {
	background-color: #454460;
  color:#BAC4CC;
}

#navigation a{
  color:#BAC4CC;
  -webkit-transition : color 0.1s ease-in;
  -moz-transition : color 0.1s ease-in;
  -o-transition : color 0.1s ease-in;
  transition : color 0.1s ease-in;
}

section.overview a {
  color:#BAC4CC;
}
  
#navigation a.active,
#navigation a:hover,
#navigation a:focus,
#navigation a:active,
section.overview a:hover,
section.overview a:focus,
section.overview a:active {
    color:#CFD4D8;
    -webkit-transition : color 0.1s ease-in;
    -moz-transition : color 0.1s ease-in;
    -o-transition : color 0.1s ease-in;
    transition : color 0.1s ease-in;
}

#navigation.float {
	z-index: 101;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}

#navigation.float h1 {
    text-transform: none;
    margin:  0;
    padding-right: 1em;
    float: left;
    font-size: 1.8em;
    color: #fff;
    display: none; /* only shown above 35em */
}

#navigation.float h1 a {
  color: #fff;
}

#navigation.hidden {
	display: none;
}

#navigation ul {
	margin-bottom: 0;
  position: relative;
}

#navigation li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
  float: none;
  border-left:1px solid #CFD4D8;
}

#navigation li.show-subnav + li{
  border-left-width:0px;
  padding-left:0px;
}

#navigation h1.title + li,
#navigation.show-subnav-button li.show-subnav + li{
  border-left-width:1px;
  padding-left: 1em;
}

#navigation a {
	text-decoration: none;
}

#subnav,
#subnavClone {
    position: absolute;
    left: -42em;
    text-align: right;
    width: 40em;
    overflow-y:auto; 
    overflow-x:hidden; 
    -webkit-overflow-scrolling: touch;
}

#subnav.fixed {
    position: fixed;
    top: 6em;
    /* calculate left offset dynamically */
}


#subnav,
#subnav.off-left  {
    opacity: 0;
}

/* Debug #subnav:focus, */
#subnav.show-nav {
    opacity : 1;
    -webkit-transition: opacity 300ms ease-in-out;
    -moz-transition: opacity 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out;
    -ms-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}  



/* show the nav at small device widths
*/
#subnav.show-nav-small {
  left: 0 !important;
  background: #A5D9C9;
  z-index: 30;
  position: fixed;
  top: 7.5em;
  width:auto;
  -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  -webkit-overflow-scrolling: touch; 
  text-align:left;
}

#subnav-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  width: 35px;
  height: 35px;
}

#subnav li {
  margin: 0;
  padding: 0.8em 0 0.5em 0;
}

#subnav a {
    text-decoration: none;
    padding: 0 1.25em 0.55em 1em;
    color: #455560;
    background: transparent no-repeat 0em 1.2em;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22403%22%20height%3D%228%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cline%20stroke%3D%22%23E4E8EA%22%20stroke-width%3D%222%22%20x1%3D%224%22%20y1%3D%224%22%20x2%3D%22400%22%20y2%3D%224%22%20/%3E%3Ccircle%20fill%3D%22%23E4E8EA%22%20cx%3D%224%22%20cy%3D%224%22%20r%3D%224%22%20/%3E%3C/svg%3E');
    -webkit-transition: background-position 0.3s ease-out, color 0.3s ease-out;
    -moz-transition: background-position 0.3s ease-out, color 0.3s ease-out;
    -o-transition: background-position 0.3s ease-out, color 0.3s ease-out;
    transition: background-position 0.3s ease-out, color 0.3s ease-out;
}

#subnav a:hover {
  color: #40A0A4;
  background-position: 2em 1.2em;
  -webkit-transition: background-position 0.15s ease-out, color 0.15s ease-out;
  -moz-transition: background-position 0.15s ease-out, color 0.15s ease-out;
  -o-transition: background-position 0.15s ease-out, color 0.15s ease-out;2
  transition: background-position 0.15s ease-out, color 0.15s ease-out;
}

aside,
section {
	margin: 0 3.5em 3.5em;
}

section.content {
    background-color: #E4E8EA;
    margin-bottom: 0;
    padding: 3em 0;
    position: relative;
    left: 0;
    min-height: 46em;
    -webkit-transition: left 300ms ease-in-out;
    -moz-transition: left 300ms ease-in-out;
    -o-transition: left 300ms ease-in-out;
    -ms-transition: left 300ms ease-in-out;
    transition: left 300ms ease-in-out;
}


section.content.content-small {
  margin-top: 7.4em;
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
    -o-transition: left 0 ease-in;
    transition: none;
}


section.content:after{
  content: "";
  display: block;
  width: 506px;
  
  
  height: 231px;
  
  margin: 0;
  position: absolute;
  bottom: 177px;
  left: -375px;
  z-index: -1;
  background: transparent;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url(./svg/node_slate.svg) ;
  -webkit-transform: rotate(-99deg);
  -moz-transform: rotate(-99deg);
  -ms-transform: rotate(-99deg);
  -o-transform: rotate(-99deg);
  transform: rotate(-99deg);
  opacity: 0.2;
  background-size: 100%;
  
  -webkit-filter:contrast(50%);
  
  
  filter: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
  filter: gray;
  -webkit-filter: grayscale(1) contrast(0%);
  
}

.ie section.content:after{
  background-image: none;
}

section > h1,
article > h2 {
	position: relative;
}
section > h1 {
	left: -1.1em;
  text-indent: 1.1em;
}

section > h1:hover .permalink {
	visibility: visible;
}

@font-face{ 
  font-family: 'Rail Model'; 
  src: url('./ie/railmodelfont-webfont.eot?#iefix') format('embedded-opentype'); 
}

section .permalink {
	text-decoration: none;
	float: left;
	margin-right: 0.2em;
	visibility: hidden;
  position: absolute;
  top: -70px; /* The height of the nav so it doesn't get hidden under */
  padding-top: 70px;
  left: -1.1em;
  font-family: "DejaVu Sans", "DejaVu Sans Bold", "DejaVu Sans Bold Oblique", "DejaVu Sans Condensed", "DejaVu Sans Condensed Bold", "DejaVu Sans Condensed Bold Oblique", "DejaVu Sans Condensed Oblique", "DejaVu Sans Mono", "DejaVu Sans Mono Bold", "DejaVu Sans Oblique", "EversonMono", "EversonMono-Oblique", Symbola, "Free Serif", Quivira, "Rail Model", Code2000, Menlo, "Apple Symbols"
}

.ltIE9 section .permalink {
  font-family: "Rail Model";
}



.project-name {
    font-family: Michroma, serif;
    font-size: 162.5%;
}

.overview .project-name {
  color: #fff;
}


.quote blockquote, .quote cite {
    text-align:center;
    display:block;
}

.quote blockquote{
    font-size: 1.5em;
    line-height: 1.46em;
    padding: 0 3em;
    margin-top: 0;
}

.quote blockquote:before {
    content: "\201C"
}
.quote blockquote:after {
    content: "\201D"
}

.quote cite {
    font-size: 1.5em;
    font-style: italic;
}

.quote {
  padding-top: 6em;
  position:relative;
}

section.quote:before,
section.quote:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 48%;
  width:88px;
  height: 39px;
  margin: 0;
  background-image: url(./svg/node_slate.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  background-color: transparent;
  -webkit-transform: rotate(-240deg) scaleX(-1);
  -moz-transform: rotate(-240deg) scaleX(-1);
  -ms-transform: rotate(-240deg) scaleX(-1);
  -o-transform: rotate(-240deg) scaleX(-1);
  transform: rotate(-240deg) scaleX(-1);
  visibility: visible;
  
}

.ie section.quote:before,
.ie section.quote:after {
  background-image: none;
}

section.quote:after {
  left: auto;
  right: 48.5%;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  transform: rotate(240deg);
}

/* Hanging indent */

.embedded > ul,
.embedded > ul {
  margin-left: -1em;
  padding-bottom: 1em;
}

.embedded > ol,
.embedded > ol {
  margin-left: 1.5em;
}

article > p,
section > p {
  padding-left: 1em;
}

section.overview p {
  padding-left: 0;
}

/*
article > p:first-of-type,
section > p:first-of-type,
article > h2 + p,
.embedded > h3 + p,
.embedded > h4 + p,
.embedded > h5 + p {
    text-indent: -1em;
}
*/


/* Embedded Markdown Docs */

.embedded:last-child {
  margin-bottom: 0;
}

.embedded h1 {
	font-size: 2.2em;
}

.embedded h2 {
	font-size: 1.8em;
}

.embedded h3 {
	font-size: 1.6em;
	margin: 2em 0 1em;
}

.embedded h4{
	font-size: 1.5em;
	margin: 2em 0 1em;
}

.embedded h5{
	font-size: 1.4em;
	margin: 2em 0 1em;
}

.embedded ul li {
	list-style-type: circle;
	margin-left: 26px;
}

.embedded p.image-left,
.embedded p.image-right {
    text-indent: 0;
    padding-left: 0;
}

.embedded .image-left img{
    float: left;
    margin: 0 1em 1em 0;
}

.embedded .image-right img{
    float: right;
    margin: 0 0 1em 1em;
}

.embedded .image-right:before,
.embedded .image-right:after,
.embedded .image-left:before,
.embedded .image-left:after {
    content:"";
    display:table;
}
.embedded .image-left:after,
.embedded .image-right:after {
    clear:both;
}

button {
  color:#fff;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #243536;
  background: -moz-linear-gradient(top, #243536 0%, #243536 18%, #636B70 78%, #636B70 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#243536), color-stop(18%,#243536), color-stop(78%,#636B70), color-stop(100%,#636B70));
  background: -webkit-linear-gradient(top, #243536 0%,#243536 18%,#636B70 78%,#636B70 100%);
  background: -o-linear-gradient(top, #243536 0%,#243536 18%,#636B70 78%,#636B70 100%);
  background: -ms-linear-gradient(top, #243536 0%,#243536 18%,#636B70 78%,#636B70 100%);
  background: linear-gradient(top, #243536 0%,#243536 18%,#636B70 78%,#636B70 100%);
}

button:hover,
button:focus,
button:active {
  background: #05707E;
  background: -moz-linear-gradient(top, #05707E 0%, #9DD4C5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05707E), color-stop(100%,#9DD4C5));
  background: -webkit-linear-gradient(top, #05707E 0%,#9DD4C5 100%);
  background: -o-linear-gradient(top, #05707E 0%,#9DD4C5 100%);
  background: -ms-linear-gradient(top, #05707E 0%,#9DD4C5 100%);
  background: linear-gradient(top, #05707E 0%,#9DD4C5 100%);
}

p.buttons {
	margin: 1.5em auto 0 1em;
  line-height: 1;
  padding-left: 3.75em;
}

.button {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 0.5em;
	background:#B8810D;
	background-image: -webkit-linear-gradient(top,#B8810D, #D59F0D);
	background-image: -moz-linear-gradient(top,#B8810D, #D59F0D);
	background-image: -o-linear-gradient(top,#B8810D, #D59F0D);
	background-image: linear-gradient(top,#B8810D, #D59F0D);
	border-radius: 5px;
	border: 2px solid #fff;
  margin: 0.25em 0.25em 0.5em 0;
}

.button:hover {
	background:#B8810D;
  color:#fff;
	background-image: -webkit-linear-gradient(top,#B8810D, #E6C026);
	background-image: -moz-linear-gradient(top,#B8810D, #E6C026);
	background-image: -o-linear-gradient(top,#B8810D, #E6C026);
	background-image: linear-gradient(top,#B8810D, #E6C026);
    -webkit-transition: background-image 0.3s ease-out;
}

.button:active {
	background: #E6C026;
  color:#fff;
}

.button .subtext{
  color: #454460;
  font-size:77%;
  padding-left: 0.25em;
}

.button:first-child {
	margin-right: 1em;
}

/* before SVG was # ./img/button-icon-sprite.png */
.icon {
    height: 0;
    width: 24px;
    padding-top: 24px;
    display: block;
    overflow: hidden;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2223%22%20height%3D%2223%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cstyle%3E%20line%2C%20circle%20%7B%20stroke%3A%20%23A5D9C9%3B%20stroke-width%3A%202px%3B%20fill%3A%20%23A5D9C9%3B%20%7D%20circle%20%7B%20stroke-width%3A%200%3B%20%7D%20%3C/style%3E%20%3Cline%20y2%3D%224%22%20x2%3D%2223%22%20y1%3D%224%22%20x1%3D%224%22%20/%3E%20%3Cline%20y2%3D%2211%22%20x2%3D%2223%22%20y1%3D%2211%22%20x1%3D%224%22%20/%3E%20%3Cline%20y2%3D%2218%22%20x2%3D%2223%22%20y1%3D%2218%22%20x1%3D%224%22%20/%3E%20%3Ccircle%20r%3D%222%22%20cy%3D%224%22%20cx%3D%224%22%20/%3E%20%3Ccircle%20r%3D%222%22%20cy%3D%2211%22%20cx%3D%224%22%20/%3E%20%3Ccircle%20r%3D%222%22%20cy%3D%2218%22%20cx%3D%224%22%20/%3E%20%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: 80%;
}

.show-subnav .icon{
    background-position: 2px 3px;
    float: left;
    tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
}

#navigation li.show-subnav {
  float: left;
  margin-top: -0.2em;
  border-right:0;
  background: #2C3033;
  border: 1px solid #2C3033;
  border-radius: 5px;
  background-image:  -moz-linear-gradient(top, #2C3033 0%, #2C3033 100%);
  background-image:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2C3033), color-stop(100%,#2C3033));
  background-image:  -webkit-linear-gradient(top, #2C3033 0%,#2C3033 100%);
  background-image:  -o-linear-gradient(top, #2C3033 0%,#2C3033 100%);
  background-image:  -ms-linear-gradient(top, #2C3033 0%,#2C3033 100%);
  background-image:  linear-gradient(top, #2C3033 0%,#2C3033 100%);
  padding-left: 0;
  padding-right: 0;
  margin-right: 1em;
}

.narrowScreen #navigation li.show-subnav {
  margin-top: 0;
}

.ltIE9 #navigation li.show-subnav {
  display: none;
}


/* Change Log Section */
.change-log li h2 {
	font-size: 1em;
	margin-bottom: 0.75em;
}

.change-log li li {
	font-size: 0.875em /* 14px/16px */;
	margin-left: 26px;
	list-style-type: circle;
}

.run {
	position: relative;
  margin-bottom: 3em;
}

.run .eval {
	z-index: 28;
	position: absolute;
  bottom: 12px;
  right: 10px;
	cursor: pointer;
}

.run output {
	font-family: Menlo, mono-space;
	display: block;
	background-color: #E4E8EA;
	font-size: 1.4em; /* Fixes odd issue in FF */
    min-height:1em;
	overflow: auto;
	overflow-y: hidden;
	-webkit-tab-size: 2;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	margin: 0 -3.2em 2em;
	padding: 1.5em 3.5em;
	border: 3px solid #eee;
	border-left: 0;
	border-right: 0;
	-webkit-transition: border-color 1.5s, background-color 1.5s;
	-moz-transition: border-color 1.5s, background-color 1.5s;
	-o-transition: border-color 1.5s, background-color 1.5s;
	-ms-transition: border-color 1.5s, background-color 1.5s;
	transition: border-color 1.5s, background-color 1.5s;
}

.run output.loaded {
	border-color: #fef5af;
	background-color: #fdfdea;
}

.run output svg {
  display: block;
}

aside.icons li,
.buttons .badge {
  float: left;
  margin-right: 1em;
  position:relative;
}

.buttons .badge.github {
  margin-left: -3.75em;
}

aside.icons:after {
  content: "";
  display: block;
  clear: both;
  z-index:-1;
}


aside.icons li  a,
aside.icons li  span,
.buttons .badge span {
  width: 50px;
  height: 0em;
  border: 7px solid #ffffff;
  border-radius: 50px;
  padding-top: 50px;
  -webkit-transition: border-color 0.3s ease-out;
  -moz-transition: border-color 0.3s ease-out;
  -ms-transition: border-color 0.3s ease-out;
  -o-transition: border-color 0.3s ease-out;
  transition: border-color 0.3s ease-out;
  overflow: hidden;
  display:block;
  background: url(./img/icon-sprite.png) no-repeat;
}
aside.icons li  a,
aside.icons li  span{
  -webkit-filter: grayscale(1);
  filter:/*url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);*/
}


.buttons .badge span:hover,
aside.icons li a:hover,
aside.icons li span:hover {
  filter:none; 
  -webkit-filter: grayscale(0)
}

.buttons .badge span {
  border-width: 2px;
  width: 2.5em;
  border-radius: 2.5em;
  padding-top: 2.5em;
}

.ltIE9 aside.icons li  a,
.ltIE9 aside.icons li  span,
.ltIE9 .buttons .badge {
  border-width: 0;
} 


.ltIE9 aside.icons li.github a {  background-position: -4px 4px; background-color: white;}
aside.icons li.github a {  background-position: -4px 0; }
aside.icons li.twitter a{ background-position: -2px -128px; }
aside.icons li.code-javascript span { background-position: -4px -246px; }
aside.icons li.code-html5 span { background-position: -2px -457px; }
aside.icons li.code-css span { background-position: -2px -546px; }

.buttons .badge.github span {  background-position: 0px -359px; }

aside.icons li:after ,
.buttons .badge:after {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  /*background: url('data:image/svg+xml,<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><circle fill="rgba(165,217,201,0.5)" stroke="#ffffff" stroke-width="6" cx="32" cy="32" r="29"/></svg>') no-repeat left top;*/
  background: url('data:image/svg+xml,%3Csvg%20width=%2264%22%20height=%2264%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle%20fill=%22rgba(165,217,201,0.5)%22%20stroke=%22%23ffffff%22%20stroke-width=%226%22%20cx=%2232%22%20cy=%2232%22%20r=%2229%22/%3E%3C/svg%3E') no-repeat left top;
  background-size: 100%;
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.buttons .badge:after {
  width: 2.75em;
  height: 2.75em;
  background: url('data:image/svg+xml;utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20fill%3D%22rgba(165,217,201,0.5)%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2221%22/%3E%3C/svg%3E') no-repeat left top;
  /*background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle fill="rgba(165,217,201,0.5)" stroke="#ffffff" stroke-width="2" cx="22" cy="22" r="21"/></svg>') no-repeat left top;
   background-size: 116% 116%; // attempt to scale other version */
}


.ie aside.icons li:after {
  display: none;
  background-color: transparent;
}

.buttons .badge:hover:after,
aside.icons li:hover:after  {
  opacity: 0;
}




@media (min-width:340px) {
	#navigation {
		text-align: left;
  }
}


@media (min-width:48em) {


  header img {
    width: 281px;
  }

	#navigation li {
		font-size: 1.8em;
	}

  #navigation ul,
  footer > div,
  header h1,
	section.content {
		max-width: 61em;
		margin-left: auto;
		margin-right: auto;
	}

  

  header h1 {
    width : 61em;
    padding: 0;
    font-size: 1em;
    height:18em;
    display:inline-block;
    position:relative;
	}


  header h1 a {
    max-width: 610px;
		font-size: 3.6em;
    
    padding:0 0 10.8px 0;
    
    position: absolute;
    bottom: 0;
    left: 0;
  }
  
  header a,
  header a:hover,
  header a:focus,
  header a:active {
    
    color: #fff;
    
  }
  
  header h1:after {
    top: 0;
    right: 0;
    width: 310px;
    height: 128px;
    padding:32px 4px 10px 0;
    background-size: 100%;
  }
  
  header h1.long-title {
    height: 20em;
  }
  
  header h1.long-title:after {
    padding-top:0;
    padding-bottom:0;
    margin-bottom:15px;
    bottom:36.0px;
    top: auto;
  }
  

  footer > div {
      text-align: right;
      padding:0 2em 0 0;
  }

	section:after {
		margin-left: -4em;
		margin-right: -4em;
	}

	section pre {
		margin-left: -5.6em;
		margin-right: -5.6em;
		padding-left: 2.5em;
		padding-right: 2.5em;
    max-width:65em;
	}
  
  section pre.runnable {
		padding-right: 63px;
    padding-bottom: 1.5em;
	}
  
  section pre.runnable code[contenteditable='true'] {
    outline: none;
  }
  
  section .embedded > ul pre {
    margin-left: -7.2em;
  }

  #navigation.float h1 {
    font-size: 2.6em;
    margin-top: -0.1em;
    display: block;
  }

 .run .eval {
    right: 14px;
    border: 2px solid #E4E8EA;
  }

  .icon {
      width: 31px;
      padding-top: 31px;
      border-radius: 7px;
      background-size: auto;
  }
  .show-subnav .icon{
      background-position: 3px 5px;
  }

  #navigation li.show-subnav{
      display:none;
  }
  #navigation.show-subnav-button  li.show-subnav{
      display:block;
  }
  
  section.quote:after {
    left: auto;
    right: -webkit-calc(48.5% + 0px);
    right: -moz-calc(48.5% + 0px);
    right: -o-calc(48.5% + 0px);
    right: -ms-calc(48.5% + 0px);
    right: calc(48.5% + 0px);
  }

}

@media (max-width:52em) {
  /* On subpages, on narrow screens, hide icons */
  body.subpage aside.icons{
    display:none;
  }
}
  
@media (min-width:52em) {

  #subnav.off-left  {
    margin-left: -100%;
  }

  #subnav.show-nav {
    margin-left: 0;
  }

    #subnav,
    #subnav.show-nav {
        opacity : 1;
    }
  
  section pre {
    position: relative;
    z-index: 10;
  }

  aside.icons {
    position: absolute;
    top: 3em;
    right: -10em;
    margin: 0;
    z-index: 5;
  }

    aside.icons li {
        float: none;
        margin-right: 0;
    }

    aside.icons.icons li  a,
    aside.icons li  span{
        border-color: #E4E8EA;
        margin-bottom: 1.5em;
    }

    aside.icons li a:hover{
        border-color: #ffffff;
    }

    aside.icons:after{
        width: 90px;
        height: 240px;
        margin: 0;
        background: transparent;
        background-repeat: no-repeat;
        background-position: left top;
        background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2290%22%20height%3D%22240%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cstyle%3Epath%20%7B%20stroke%3A%09%23E4E8EA%3B%20fill%3A%20none%3B%20stroke-width%3A%209%3B%20%7D%3C/style%3E%20%3Cpath%20%20d%3D%22m77.66501%2C1.668c0%2C0%206%2C56.64099%20-15.09601%2C98c-18.13898%2C35.608%20-34.23698%2C67.72299%20-34.23698%2C67.72299s-22%2C40.66803%20-22%2C70%22/%3E%3C/svg%3E') ;
        position: absolute;
        bottom: -210px;
        left: -45px;
    }
    
    aside.icons li:after {
      /*background: url('data:image/svg+xml,<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><circle fill="rgba(165,217,201,0.5)" stroke="#E4E8EA" stroke-width="8" cx="32" cy="32" r="28"/></svg>') no-repeat left top;*/
      background: url('data:image/svg+xml,%3Csvg%20width=%2264%22%20height=%2264%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle%20fill=%22rgba(165,217,201,0.5)%22%20stroke=%22%23E4E8EA%22%20stroke-width=%228%22%20cx=%2232%22%20cy=%2232%22%20r=%2228%22/%3E%3C/svg%3E') no-repeat left top;
    }

}

/* Force hardware acceleration on very small screens (assuming mobile device), optimise background */

@media only screen and (min-device-width: 320px)  and (max-device-width: 480px) {
  section.content,
  #subnav.show-nav {
    -webkit-transition: none;
  }
  body {
    background-image: none;
  }
}


/* Force correct font loading behaviour to avoid FOUT  */

.ie .loading h1.title,
.wf-electrolize-n4-loading h1,
.wf-loading h1{

  visibility: hidden;

}
.ie  h1.title{
  visibility: visible;
}

.narrowScreen header{
  position: fixed;
  z-index:101;
  width:100%;
  top: -800px;
  padding-top:800px; /* http://git.io/mIiHQg */
  left: 0;
}
.narrowScreen header h1 {
  font-size: 20px;
  padding: 11px;
  padding-right:103px;
  background: url(./svg/node_slate.svg) no-repeat  97% 7px;
  background-size: 18%;
  -webkit-filter: none;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.narrowScreen header h1:after{
  display:none;
}

.narrowScreen #navigation,
.narrowScreen #navigation.float {
   z-index: 101;
   position: fixed;
   top: 42px;
   left: 0;
   right: 0;
   margin: 0;
   box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}

.narrowScreen section .permalink {
  top: -115px; /* The height of the nav so it doesn't get hidden under */
  padding-top: 115px;
  z-index: 1;
  pointer-events:none;
}

/* Set to display none before initialising the view */
#subnav {
  visibility:hidden;
}

.long-list {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -o-column-count: 2;
  -ms-column-count: 2;
}