* {
  margin:0;
  padding:0;
  border-width:0;
  font:inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* General */

body {
  font:14px/1.2 'Open Sans',sans-serif;
  background-color:#212121;
  color:#a7a7a7;
}

h1 {
  font-size:36px;
  line-height: 1.2;
  margin:40px 0 40px;
  color:#dadada;
  padding:20px 0;
  font-weight: 600;
  border-bottom:3px #72B248 solid;
  letter-spacing: -2px;
  text-shadow:0 2px 0 #000;
}

h2 {
  font-size:24px;
  line-height: 1.2;
  letter-spacing: -1px;
  padding: 10px 0;
  margin:30px 0 20px;
  color:#dadada;
  font-weight: 600;
  text-shadow:0 2px 0 #000;
}

h3 {
  font-size:18px;
  line-height: 1.2;
  margin:30px 0 20px;
  color:#dadada;
  font-weight: 600;
}

p {
  margin:20px 0;
  line-height:1.5;
}

a, a:hover {
  color: #fff;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* Layout */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  background-color: #1d1d1d;
  border-right: 1px #565656 solid;
}

.logo {
  padding: 20px 0;
  text-align: center;
  background-color: #222;
  border-bottom: 1px #565656 solid;
}

.logo-img {
  display: inline-block;
  vertical-align: middle;
}

.logo-img img {
  height: 80px;
}

.logo-text {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  margin-left: 10px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.05em;
  font-size: 18px;
  line-height: 1.2;
  text-shadow: 0 1px 0 #696969;
}

.menu a {
  text-decoration: none;
}

.menu-link {
  display: block;
  margin-top: 10px;
  padding: 10px 20px;
  font-weight: 600;
  color: #eee;
}

.menu-link:hover {
  background-color: #222;
}

.menu-link i {
  float: right;
  color: #aaa;
}

.menu-link:hover i {
  color: #eee;
}

.menu-section--active i {
  color: #72B248;
}

.menu-sublink {
  display: none;
  padding: 5px 10px 5px 25px;
  font-weight: 600;
  color: #a7a7a7;
}

.menu-section--active .menu-sublink {
  display: block;
}

.menu-sublink:hover {
  background-color: #222;
}

.content {
  margin-left: 250px;
  padding: 50px;
}

.content :first-child {
  margin-top: 0;
}

.content p {
  max-width: 800px;
  text-align: justify;
}

.manual {
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
  z-index: 5;
  line-height: 1.2;
  background-color: #262626;
  box-shadow: 0 0 50px rgba(0,0,0,.2);
}

/* Blocks */

.table {
  border-collapse:collapse;
}

.table th, .table td {
  padding:10px;
}

.table th {
  color:#EBEFE7;
  font-weight:600;
  border-bottom: 2px #333 solid;
}

.table td {
  border-bottom: 1px #333 solid;
}

.table tr:last-child td {
  border-bottom: none;
}

.example {
  margin: 20px 0 30px;
  border: 1px #444 solid;
}

.example-title {
  padding: 10px;
  font-weight: bold;
  background-color: #262626;
  color: #eee;
  border: 0 #444 solid;
  border-width: 1px 0;
}

.example-title:first-child {
  border-top: 0;
}

.example-content {
  padding: 20px;
  background-color: #1f1f1f;
}

.code .CodeMirror {
  height:auto;
  background-color: #1f1f1f;
}

.code .CodeMirror-lines, .code .CodeMirror-line {
  padding: 0;
}

.output {
  line-height: 1.3;
}

.clip {
  position: relative;
  display: inline-block;
}

.clip::before {
  content: "GIF";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #1f1f1f;
  text-align: center;
  color: #eee;
  border: 3px #999 dashed;
  font-weight: 600;
  font-size: 20px;
  box-shadow: 0 0 30px rgba(165, 165, 165, 0.18);
}

.clip:hover::before {
  display: none;
}

.command {
  font-family: monospace;
  color: #EBEFE7;
}

.manual p [class^="cm-"] {
  font-family:monospace;
}

.manual > :first-child {
  margin-top: 0;
}

.manual > :last-child {
  margin-bottom: 0;
}

.note {
  padding: 10px 15px;
  border-left: 2px #3D6C20 solid;
}

.note-title {
  font-weight: 600;
  color: #72B248;
}

.char {
  padding: 3px 4px;
  font-family:monospace;
  background-color: #171717;
  color: #eee;
  border: 1px #444 solid;
}

b {
  position:relative;
  display:inline-block;
  width:20px;
  height:20px;
  vertical-align:middle;
  background-color:#202020;
  background-size:cover;
}

b:after {
  display:none;
  position:absolute;
  top:0;
  left:100%;
  margin-left:4px;
  z-index:10;
  padding:0 4px;
  line-height:24px;
  background-color:#111;
  white-space:nowrap
}

b:hover:after {
  display:block;
}

.b-i { background-image:url(../img/blocks/impulse-down.png); }
.b-i:after { content:"Impulse Command Block"; }
.b-ic { background-image:url(../img/blocks/impulse-conditional-down.png); }
.b-ic:after { content:"Conditional Impulse Command Block"; }
.b-c { background-image:url(../img/blocks/chain-down.png); }
.b-c:after { content:"Chain Command Block"; }
.b-cc { background-image:url(../img/blocks/chain-conditional-down.png); }
.b-cc:after { content:"Conditional Chain Command Block"; }
.b-r { background-image:url(../img/blocks/repeating-down.png); }
.b-r:after { content:"Repeating Command Block"; }
.b-rc { background-image:url(../img/blocks/repeating-conditional-down.png); }
.b-rc:after { content:"Conditional Repeating Command Block"; }
.b-0 { background-image:url(../img/blocks/redstone-lamp-off.png); }
.b-0:after { content:"Needs redstone"; }
.b-1 { background-image:url(../img/blocks/redstone-lamp-on.png); }
.b-1:after { content:"Always active"; }

/* Specific */

.attributes td:first-child {
  text-align:center;
  font-family:monospace;
}

/* Helpers */

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }