/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%; /*to enable resizing for IE*/
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

/* base.css, part of YUI's CSS Foundation */
h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;
}
h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%;
}
h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;
}
h1,h2,h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold;
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
}
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}
ul {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
dd {
	/*providing spacing for definition terms*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated margin to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table,pre {
	/*so things don't run into each other*/
	margin-bottom:1em;
}
/* setting a consistent width, 160px;
   control of type=file still not possible
   *width is for ie7 (no ie6 fallback) */
input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssbase { display: none; }

html, body {
  height: 100%;
}

body {
  max-width: 1140px;
  min-width: 748px;
  margin: 0 auto;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

a,
a:visited {
  text-decoration: underline;
  color: black;
}

a:hover {
  color: #999;
}

.title a,
.title a:hover,
.title a:visited {
  text-decoration: none;
  color: black;
}

.wrapper {
  min-height: 100%;
  position: relative;
  margin: 0 auto;
}

.main {
  padding-bottom: 150px;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: #333333;
  width: 100%;
  margin: 2em 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.7em;
}

.title {
  font-family: ‘Lucida Console’, Monaco, monospace;
}

.title-shell {
  font-weight: normal;
}

.title-share {
  font-weight: bold;
}

section {
  margin: 4em 0;
}

/* Phones: the desktop min-width would force horizontal panning of the
   whole page; let the layout shrink to the viewport instead */
@media (max-width: 47em) {
  body {
    min-width: 0;
  }

  section {
    margin: 2.5em 0;
  }
}


.wrapper {
  width: 45em;
}

.title {
  text-align: center;
  margin: 4em;
}

.title h1 {
  font-size: 6em;
  margin: 0;
}

.title h2 {
  font-size: 1.5em;
  text-transform: uppercase;
  margin: 0;
}

.instructions .download code {
  display: inline-block;
}

.instructions .download {
  text-align: center;
  margin: 4em 0;
}

.main h2 {
  text-transform: uppercase;
  font-size: 2em;
}

.main h3 {
  font-size: 1.5em;
}

pre,
.download code {
  background: #222;
  color: #F0F0F0;
  line-height: 1.5em;
  display: block;
}

pre a,
.download code a {
  color: #aaa;
  text-decoration: none;
}

pre a:hover,
.download code a:hover {
  color: #ccc;
  text-decoration: underline;
}

pre {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 1em;
  /* Long lines (e.g. a share link with its key) are clipped to the box
     instead of spilling past it; only the part that fits is shown. */
  overflow: hidden;
}

.download code {
  -webkit-border-radius: 41px;
  -moz-border-radius: 41px;
  -ms-border-radius: 41px;
  -o-border-radius: 41px;
  border-radius: 41px;
  padding: 1em 2em;
  position: relative;
  cursor: pointer;
}

.download code.copied::after {
  content: "Copied!";
  position: absolute;
  top: -1.8em;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #F0F0F0;
  font-size: 0.8em;
  padding: 0.2em 0.8em;
  border-radius: 10px;
}

pre.demo {
  box-sizing: border-box;
}

pre.demo .cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: #F0F0F0;
}

@media (prefers-reduced-motion: no-preference) {
  pre.demo .cursor {
    animation: demo-cursor-blink 1s steps(1) infinite;
  }
}

@keyframes demo-cursor-blink {
  50% { opacity: 0; }
}

.shell-output {
  color: #999;
  font-style: italic;
}

body:has(#os-node:checked) .linux:not(.node),
body:has(#os-node:checked) .macos:not(.node),
body:has(#os-node:checked) .windows:not(.node),
body:has(#os-linux:checked) .node:not(.linux),
body:has(#os-linux:checked) .windows:not(.linux),
body:has(#os-linux:checked) .macos:not(.linux),
body:has(#os-macos:checked) .node:not(.macos),
body:has(#os-macos:checked) .windows:not(.macos),
body:has(#os-macos:checked) .linux:not(.macos),
body:has(#os-windows:checked) .node:not(.windows),
body:has(#os-windows:checked) .macos:not(.windows),
body:has(#os-windows:checked) .linux:not(.windows) {
  display: none;
}

.operating-systems {
  margin: 1em;
  text-align: right;
  letter-spacing: 0.5em;
}

.operating-systems input {
  display: none;
}

label[for] {
  cursor: pointer;
}

.operating-systems .node-logo {
  height: 1.9em;
  width: auto;
  vertical-align: -0.25em;
  /* the nav's letter-spacing would split the JS glyphs apart */
  letter-spacing: normal;
}

.operating-systems .os-logo {
  height: 1.9em;
  width: auto;
  vertical-align: -0.35em;
}

.operating-systems input:not(:checked) + label {
  color: #ccc;
}

.operating-systems input:not(:checked) + label:hover {
  color: #888;
}

/* Phones: fluid wrapper with breathing room, smaller hero title, and
   install commands that wrap inside the pill instead of overflowing it */
@media (max-width: 47em) {
  .wrapper {
    width: auto;
    padding: 0 1em;
  }

  .title {
    margin: 2em 0;
  }

  .title h1 {
    /* 13vw keeps "shellshare" inside ~320px viewports */
    font-size: clamp(2.25em, 13vw, 3em);
  }

  .title h2 {
    font-size: 1em;
  }

  .instructions .download {
    margin: 2em 0;
  }

  .download code {
    padding: 1em 1.25em;
    border-radius: 20px;
  }

  /* Long unbreakable code tokens (install commands in the pill, share
     links and JSON events inline in the FAQ) wrap instead of widening
     the page */
  code {
    overflow-wrap: anywhere;
  }

  .operating-systems {
    text-align: center;
    /* compensate the trailing letter-spacing after the last label,
       which would otherwise shift the centered row left */
    padding-left: 0.5em;
  }

  pre {
    font-size: 0.8em;
    /* On phones even instructional lines (e.g. the --password example)
       fall past the clip; let them scroll instead. The scrollbar is
       hidden so its height doesn't disturb the demo's min-height
       measurement. */
    overflow-x: auto;
    scrollbar-width: none;
  }

  pre::-webkit-scrollbar {
    display: none;
  }
}