jdd.css

body {
    padding: 0px 0px;
    margin: 0px 0px;
}

pre {
  background-color:#eee;
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}

pre .codeLine,
pre .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  font:normal normal 13px/16px "Monospace;
  color:black;
  display:block;
}

pre.codeBlock span.code {
    min-width: 97%;
    display: inline-block;
}

pre .line-number {
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  
  -o-user-select: none;
  user-select: none;
  padding-left: 0.4em;
  padding-right: 0.2em;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}

div.container {
    position: relative;
    margin: 0 auto;
}

pre.left {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

pre.right {
    width: 40%;
    display: inline-block;
    vertical-align: top;
    margin-left: 1em;
}

ul.toolbar {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 12%;
    border: thin solid lightgray;
    background: #fbfbfb;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

ul.toolbar li {
    margin: 1em 5px;
}

div.gutter {
    float: left;
}

div.codeLine span.diff {
    cursor: pointer;
}

div.codeLine span.eq {
    background: rgba(50, 57, 88, 0.1);
}

div.codeLine span.type {
    background: rgba(192, 100, 94, 0.1);
}

div.codeLine span.missing {
    background: rgba(0, 100, 80, 0.1);
}

div.codeLine span.selected {
    background: #86abd9;
    color: white;
}

canvas.center {
    position: absolute;
    left: 40%;
    width: 20%;
    height: 100%;
    top: 0;
}