elsewhere/_site/css/forest.css

A node project that aims to replicate the functionality of the Google Social Graph API

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: #2f4430;
  background: #87c980;
  background-image: url('./img/tile.png');
  background-image: url('./img/tile.png') -moz-linear-gradient(left, #87c980 0%, #94BFE1 50%, #87c980 100%);
  background-image: url('./img/tile.png') -webkit-gradient(linear, left top, right top, color-stop(0%,#87c980), color-stop(50%,#94BFE1), color-stop(100%,#87c980));
  background-image: url('./img/tile.png') -webkit-linear-gradient(left, #87c980 0%,#94BFE1 50%,#87c980 100%);
  background-image: url('./img/tile.png') -o-linear-gradient(left, #87c980 0%,#94BFE1 50%,#87c980 100%);
  background-image: url('./img/tile.png') -ms-linear-gradient(left, #87c980 0%,#94BFE1 50%,#87c980 100%);
  background-attachment: fixed;
}


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

a:hover,
a:focus,
a:active {
  color:#008006;
  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: Forum, "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 #ccc;
    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 #dbe5d7;
  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 : url('./img/tile.png');
}

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

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

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


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 #5d6f5d 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: #9cd4a2;
	background-color: #2f4430;
}

#navigation, section.overview {
	background-color: #2f4430;
  color:#9cd4a2;
}

#navigation a{
  color:#9cd4a2;
  -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:#9cd4a2;
}
  
#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:#47AA00;
    -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 #9CD4A2;
}

#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: #87c980;
  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: #008006;
    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%237DB378%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%237DB378%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: #008006;
  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: #dbe5d7;
    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: -336px;
  z-index: -1;
  background: transparent;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url(./svg/node_forest.svg) ;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  opacity: 0.2;
  background-size: 100%;
  
  
}

.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: Forum, 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: 50%;
  width:88px;
  height: 39px;
  margin: 0;
  background-image: url(./svg/node_forest.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  background-color: transparent;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  visibility: visible;
  
}

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

section.quote:after {
  left: auto;
  right: 49%;
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* 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 #5c8c5f;
  border-radius: 3px;
  background: #9cd4a2;
  background: -moz-linear-gradient(top, #9cd4a2 0%, #9cd4a2 18%, #5c9e5e 78%, #5c9e5e 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9cd4a2), color-stop(18%,#9cd4a2), color-stop(78%,#5c9e5e), color-stop(100%,#5c9e5e));
  background: -webkit-linear-gradient(top, #9cd4a2 0%,#9cd4a2 18%,#5c9e5e 78%,#5c9e5e 100%);
  background: -o-linear-gradient(top, #9cd4a2 0%,#9cd4a2 18%,#5c9e5e 78%,#5c9e5e 100%);
  background: -ms-linear-gradient(top, #9cd4a2 0%,#9cd4a2 18%,#5c9e5e 78%,#5c9e5e 100%);
  background: linear-gradient(top, #9cd4a2 0%,#9cd4a2 18%,#5c9e5e 78%,#5c9e5e 100%);
}

button:hover,
button:focus,
button:active {
  background: #45b64a;
  background: -moz-linear-gradient(top, #45b64a 0%, #376a38 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45b64a), color-stop(100%,#376a38));
  background: -webkit-linear-gradient(top, #45b64a 0%,#376a38 100%);
  background: -o-linear-gradient(top, #45b64a 0%,#376a38 100%);
  background: -ms-linear-gradient(top, #45b64a 0%,#376a38 100%);
  background: linear-gradient(top, #45b64a 0%,#376a38 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: #2f4430;
  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%237DB378%3B%20stroke-width%3A%202px%3B%20fill%3A%20%237DB378%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: #2D432E;
  border: 1px solid #152E16;
  border-radius: 5px;
  background-image:  -moz-linear-gradient(top, #2D432E 0%, #152e16 100%);
  background-image:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2D432E), color-stop(100%,#152e16));
  background-image:  -webkit-linear-gradient(top, #2D432E 0%,#152e16 100%);
  background-image:  -o-linear-gradient(top, #2D432E 0%,#152e16 100%);
  background-image:  -ms-linear-gradient(top, #2D432E 0%,#152e16 100%);
  background-image:  linear-gradient(top, #2D432E 0%,#152e16 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: #dbe5d7;
	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(25, 132, 30, 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(25, 132, 30, 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(25, 132, 30, 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(25, 132, 30, 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: 5.4em;
    
    padding:0 0 16.2px 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: 280px;
    height: 126px;
    padding:34px 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:54.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 #dbe5d7;
  }

  .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(49% + );
    right: -moz-calc(49% + );
    right: -o-calc(49% + );
    right: -ms-calc(49% + );
    right: calc(49% + );
  }

}

@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: #dbe5d7;
        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%23dbe5d7%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(25, 132, 30, 0.5)" stroke="#dbe5d7" 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(25, 132, 30, 0.5)%22%20stroke=%22%23dbe5d7%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: url('./img/tile.png');
  }
}


/* 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:93px;
  background: url(./svg/node_forest.svg) no-repeat  97% 7px;
  background-size: 18%;
  -webkit-filter: ;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
.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;
}