jsbin/public/css/style.css

@font-face {
  font-family: 'MesloLGMDZ';
  src: url('../font/meslolgm-dz-regular-webfont.eot');
  src: url('../font/meslolgm-dz-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../font/meslolgm-dz-regular-webfont.woff') format('woff'),
       url('../font/meslolgm-dz-regular-webfont.ttf') format('truetype'),
       url('../font/meslolgm-dz-regular-webfont.svg#meslolgm-dz-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
  height: 100%;
}

body { 
  margin: 0; 
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 13px;
  min-width: 976px;
  overflow: hidden;
  /*background: url(../images/jsbin-bg.gif) repeat-x 0 -10px;*/
  background: #fff url(../images/jsbin_animated.gif) no-repeat center;
  height: 100%;
}

body.ready {
  background: #fff url(../images/jsbin_static.png) no-repeat center;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

#control {
  z-index: 199999;
  min-width: 720px;
  height: 35px;
  position: absolute;
/*  width: 100%;*/
  left: 0;
  right: 0;
  border-bottom: 1px solid #aaa;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0, rgba(0,0,0,0.15) 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.15))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0,rgba(0,0,0,0.15) 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0,rgba(0,0,0,0.15) 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0,rgba(0,0,0,0.15) 50%); /* IE10+ */
  background: linear-gradient(top,  rgba(0,0,0,0) 0,rgba(0,0,0,0.15) 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#26000000',GradientType=0 ); /* IE6-9 */
  background-color: #fff;

}

#control, .label {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.control, .help, .starting {
/*  width: 100px;*/
  
  float: left;
  white-space: nowrap;
}

.control {
  padding-right: 0;
  width: 100%;
  position: relative; 
  z-index: 1;
}

.starting {
  text-align: center;
}

#info {
  min-width: 200px;
  position: relative;
}

.help {
/*  width: 10%;*/
  /*min-width: 134px;*/
  text-align: right;
  position: absolute;
  right: 0; 
  top: 0;
  z-index: 0;
}

.help a {
  outline: 0;
  border-right: 0;
}

.starting, .help {
  z-index: 1;
  line-height: 25px;
}

ul.flat {
  margin: 0;
  padding: 0;
}

ul.flat li {
  float: left;
  display: block;
  list-style: none;
  margin: 0 0 0 15px;
  padding: 0;
}

.help ul.flat {
  float: right;
}

#control > *, a {
  color: #232323;
  text-shadow: #fff 1px 1px 1px;
}

a {
}

a:hover {
  text-shadow: white 0 1px 1px;
}

.light {
  font-weight: normal;
  text-decoration: none;
}

.stretch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#bin {
  top: 36px;
  width: 100%;
  z-index: 2;
  display: none;
}

.panelsVisible #bin {
  display: block;
}

.resize {
  cursor: ew-resize;
  background: #ccc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAMCAYAAACnfgdqAAAAMElEQVQIHWP8//8/AxRoMAA5ZkDcAsT/mYCiN4GYBYidGIECUFUMDCAZOEDmUNkAAKKgK80+TE8oAAAAAElFTkSuQmCC) no-repeat 25% 45%;
  -webkit-transition: opacity ease-in 50ms;
  -moz-transition: opacity ease-in 50ms;
  -ms-transition: opacity ease-in 50ms;
  -o-transition: opacity ease-in 50ms;
  transition: opacity ease-in 50ms;
}

.handle { bottom: 4px; margin-left: -16px; text-shadow: 1px 1px 1px #fff; color: #666; }

.ie .resize {
  cursor: w-resize;
}

.block {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%; 
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

.ie .block {
  cursor: w-resize;
}

/*div.preview {
  display: none;
  width: 100%;
}
*/
#library {
  padding: 2px;
  right: 0;
  margin-left: 5px;
  position: absolute;
  top: -1px;
  left: -5px;
  opacity: 0;
  cursor: pointer;
  display: block;
  height: 37px;
  border: 1px solid #CCC;
  outline: none;
}

iframe.javascript {
  border-right: 1px solid #ccc !important;
}

.buttons {
  min-width: 732px;
  min-width: 100%;
  float: left;
  display: block;
  /*margin-right: 10px;*/
}

.dropdownmenu a, .button {
  position: relative;
  border: 1px solid #CCC;
  height: 23px;
  line-height: 25px;
  padding: 6px 10px;
  display: inline-block;
  /*float: left;*/
  text-decoration: none;
  margin: 0 0;
  /*background: #fff;*/
  /*background: rgba(255, 255, 255, 0.3);*/
  font-size: 13px;
  border-top: 0;
  border-bottom: 0;
}

/*#control span {
  display: block;
  float: left;
  height: 10px;
  padding-top: 4px;
  padding-bottom: 10px;
  line-height: 20px;
}*/

.gap {
  margin-right: 10px;
}

.dropdownmenu a:hover, a.button:hover, a.hover {
  /*-moz-box-shadow: #fff 0 0 5px;*/
  background: rgba(0, 0, 0, 0.04);
  z-index: 1;
}

a.button:active, .button:focus {
  -moz-box-shadow: #C8C8C8 0 0 3px;
  -webkit-box-shadow: #C8C8C8 0 0 3px;
  box-shadow: #C8C8C8 0 0 3px;
  border-color: #fff;
  outline: 0;
  text-shadow: none;
}

/*body.source a.source,
body.preview a.preview {
  background: #aaa;
  background: rgba(0, 0, 0, 0.25);
  text-shadow: none;
  border: 1px solid #ccc;
  -moz-box-shadow: #fff 0 0 5px;
  -webkit-box-shadow: #fff 0 0 5px;
  box-shadow: #fff 0 0 5px;
  
  background-image: 
    -webkit-gradient(
      radial,
      center center,
      0,
      center center,
      50,
      color-stop(0, #BFBFBF),
      color-stop(1, #949494)
    );
  
}*/

.control a.selected {
  background: #aaa;
  background: rgba(0, 0, 0, 0.25);
  text-shadow: none;
  border: 1px solid #ccc;
}

.group a.selected {
  background: #fff;
  border: 0;
  background-image: url(../images/check.png);
  background-repeat: no-repeat;
  background-position: 6px 9px;
}

.group a.selected:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.preview a.preview {
  border-left: 0;
}

.group {
  border-left: 1px solid #ccc;
}

.left {
  border-left: 1px solid #ccc;
}

.right {
  border-right: 1px solid #ccc;
}

div.menu {
  margin-left: -1px;
  /*border-left: 1px solid #ccc;*/
  /*float: left;*/
  display: inline-block;
  /*width: 104px;*/
  position: relative; 
  z-index: 20;
  padding: 0;
  /*overflow: hidden;*/
}

#control div.group > * {
  display: inline-block;
  float: none;
  padding: 6px 10px;
  text-align: center;
  font-weight: normal;
  text-decoration: none;
  position: relative;
  border: 0;
}

#control div.group :hover  {
  /*background: #eee;*/
}

#control .group .title {
  padding-right: 40px;
}

#control div.group .button-dropdown  {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ccc;
}

#control .group a {
}

#preview {
  z-index: 11; /* gets over the labels in IE */
}

#preview iframe,
#live iframe,
#console {
  height: 100%;
  width: 100%;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 35px;
}

body.source #preview {
  display: none;
}

body.preview #source {
  opacity: 0;
  filter:alpha(opacity=0);
}

body.preview #preview,
body.source #source {
  display: block;
}

body.preview #source select {
  display: none;
}

.overlay {
  z-index: 98;
  background: #000;
  background: rgba(255, 255, 255, 0.3);
}

.javascript-only div.javascript {
  width: 100%;
  left: 0%;
}

.javascript-only div.html {
  display: none;
  left: 100%;
  width: 100%;
}

.label .show {
  display: none;
}

.javascript-only .label .hide,
.html-only .label .hide {
  display: none;
}

.javascript-only .label .show,
.html-only .label .show {
  display: inline;
}

.html-only div.javascript {
  left: -50%;
  display: none;
}

.html-only div.html {
  left: 0%;
  width: 100%;
}

/* lightbox */
.lightboxWrapper {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
}

.overlay {
  position: absolute;  
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
}

.overlay {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
  background: #fff;
}

.lightbox {
  position: relative;
  width: 600px;
  z-index: 12;
/*  border: 10px solid #ccc;*/
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  -moz-box-shadow: #666 0 0 5px;
  -webkit-box-shadow: #666 0 0 5px;
  box-shadow: #666 0 0 5px;
  top: 75px;
  width: 80%;
  max-height: 65%;
}

.lightbox h1 {
  margin: 0;
  background: #000;
  padding: 20px;
  color: #fff;
  position: relative;
/*  width: 100%;*/
}

.lightbox p,
.lightbox h2,
.lightbox h3 {
  margin: 14px 20px;
}
  
.lightbox p,
.lightbox li {
  font-size: 16px;
}

.lightbox li {
  margin: 8px 0;
}

.video {
  padding-left: 20px;
  background: url(../images/play.gif) no-repeat left center;
}

#info {
  display: inline-block;
  background: url(../images/info.gif) no-repeat bottom left;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-family: georgia;
  font-size: 10px;
  height: 14px;
  line-height: 14px;
  width: 14px;
  text-align: center;
  text-shadow: none;
}

#info:hover {
  background: url(../images/info.gif) no-repeat top left;  
}

#startingpoint {
  outline: 0;
}

textarea {
  margin: 0.4em;
  border: 0;
  padding: 0;
  font-family: Menlo, Monaco, consolas, monospace;
  font-size: 10pt;
  color: black;
  margin-top: 30px;
  padding: 6px;
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  resize: none;
  outline: none;
  -webkit-appearance: none;
}

#javascript {
  margin-top: 26px;
}

/*div.javascript {
  border-right: 1px solid #ccc;
}*/

/* tab based help pages */
#navigation {
  margin: 0;
  float: left;
  display: block;
  width: 200px;
  padding-left: 0;
  list-style: none;
}

#navigation li {
  margin: 1px 0;
}

#navigation a {
  background: #A2B2CC;
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  margin: 1px 0;
  text-shadow: none;
}

#navigation a:hover,
#navigation a.selected:hover {
  background: #89C;
  font-weight: bold;
}

#navigation a:active {
  border: 2px solid #647ECC;
  padding: 8px;
}

#navigation a.selected {
  background: #768BCC;
  font-weight: bold;  
}

.panels {
  margin-left: 210px;
}

.panels li {
  margin: 14px 0;
}

.panels code {
  font-size: 16px;
}

/* hud - apply style hud */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: url(../images/op7.png) repeat;
}

.hud .outercontainer {
  background: #1B1B1B;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  position: relative;
}

.hud .title {
  text-align: center;
  text-shadow: #000 1px 1px 1px;
  background: #454645;
}

#revert {
  display: none;
}

#revert {
  /*display: inline-block;*/
  height: 23px;
}

#revert img {
  margin-top: 1px;
  margin-right: -1px;
  border: 0;
  vertical-align: top;
  padding-top: 3px;
}

#revert img.enabled {
  display: none;
}

#revert.enable img.disabled {
  display: none;
}

#revert.enable img.enabled {
  display: inline;
}

body.streaming {
  background-position: 0 11px;
}

#stream {
  display: none;
}

#streaming {
  display: block;
  top: -23px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 22px;
  color: #fff;
  font-weight: bold;
  line-height: 20px;
  text-shadow: #0A0 0 1px 0;
  background: #0c0;
  border-bottom: 1px solid #0a0;
  cursor: pointer;
}

#streaming .msg {
  padding-left: 15px;
}

#streaming a {
  text-shadow: #0A0 0 1px 0;
  color: #fff;
}

body.pausestream #streaming .pause {
  display: none;
}

body.streaming #streaming .resume {
  display: none;
}

body.pausestream #streaming .resume {
  display: inline;
}

#streaming .listen {
  display: none;
}

#streaming.listen .listen {
  display: inline;
}

body.pausestream #streaming {
  background: #c00;
  text-shadow: #a00 0 1px 0;
  border-bottom: 1px solid #a00;
}

body.pausestream #streaming a {
  text-shadow: #a00 0 1px 0;
}

body.streaming #streaming {
  top: 0;
}

body {
  -webkit-transition: background-position 100ms ease-out;
  -o-transition: background-position 100ms ease-out;
  -moz-transition: background-position 100ms ease-out;
  transition: background-position 100ms ease-out;
}

#streaming, #control, #bin {
  -webkit-transition: top 100ms ease-out, opacity 50ms linear;
  -o-transition: top 100ms ease-out, opacity 50ms linear;
  -moz-transition: top 100ms ease-out, opacity 50ms linear;
  transition: top 100ms ease-out, opacity 50ms linear;
}

body.streaming #control,
body.streaming #help {
  top: 22px;
}

body.streaming #bin {
  top: 73px;
}

/* simplified for that poor old dog: IE6 */
.ie6 .help,
.ie6 #help {
  display: none;
}

.ie6 .buttons a {
  color: #000;
}

.ie6 div, 
ie6, li {
  zoom: 1;
} 

.ie6 textarea {
  border: 5px solid #ccc;
  z-index: 9999;
  display: block;
  opacity: 1;
  -moz-opacity: 1;
  filter:alpha(opacity=1);
  outline: 1px solid #000;
  color: #000;
}

.ie6, .ie6 * {
  height: 100%;
}

#jslabel em {
  color: #a00;
  font-weight: normal;
  font-style: normal;
  font-size: 11px;
  padding: 2px;
  padding-left: 5px;
}

#startingpoint.button.saved {
  /*background-image: url(../images/tick.png);*/
  background-repeat: no-repeat;
  background-position: 8px 7px;
}

.button.download {
  position: relative;
}

.button.download:before {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 6px;
  font-weight: normal;

  /*padding-left: 24px;*/
/*  background-image: url(/images/arrow_down_12x12.png);*/
  /*background-image: url(../images/download.png);*/
  /*background-repeat: no-repeat;*/
  /*background-position: 4px -33px;*/
}

.button.download:hover {
  /*background-image: url(../images/download.png);*/
  /*background-repeat: no-repeat;*/
  /*background-position: 4px 7px;*/
}

#panelsvisible a {
  padding-right: 20px;
  background-image: url(../images/x_7x7.png);
  background-repeat: no-repeat;
  background-position: 91% 10px;
}


/* attempt to get a live render preview in */
#live {
  /*display: none;*/
  /*top: 60%;*/
  /*border-top: 1px solid #ccc;*/
  background: white;
  z-index: 9999;
}

.live #live {
  display: block;
}

.preview #live {
  display: none;
}

.live #source {
    bottom: 40%;
}

#live { 
  /*background: white url(../images/jsbin-bg.gif) repeat-x 0 -62px;*/
  background: white;
  /*top: 0;*/
  /*left: ;*/
  border-top: 0;
  /*border-left: 1px solid #ccc;*/
}

.live #source {
  bottom: 0;
  right: 0;
}

.autocomplete {
  position: absolute;
  overflow: hidden;
  border: 2px solid #DFE0B4;
}

.autocomplete select {
  margin: 0;
  padding: 0;
  outline: none !important;
  background: #FFFFDB;
  border: 0;
  font-family: MesloLGMDZ, MenschRegular, Menlo, Monaco, consolas, monospace;
  font-size: 12px;
}

.showtip #bin {
  bottom: 26px;
}

#tip {
  z-index: 10;
  display: none;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  line-height: 20px;
  background: #fdfece;
  left: 0;
  right: 0;
  padding: 2px 10px 2px 20px;
}

#tip p {
  margin: 0;
  padding: 0 65px 0 0;
}

#tip a.dismiss {
  position: absolute;
  right: 20px;
  top: 2px;
  text-decoration: none;
}

.showtip #tip {
  display: block;
}

.details, details {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 12px;
  background: #FEE0E0;
  color: #bb0000;
}

.summary, summary {
  cursor: pointer;
  padding: 3px 5px;
  display: block;
  font-weight: bold;
  background: #FC9B9F;
  border: 0;
}

details ol, .details ol {
  padding-left: 21px;
  max-height: 150px;
  overflow: auto;
}

details li, .details li {
  margin: 5px 0;
  cursor: pointer;
}

.keyboardHelp #keyboardHelp {
  display: block;
}

.urlHelp #urlHelp {
  display: block;
}

.modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 199999; /* gosh that's a stupid number */

  /*background: #000;*/
  /*background: rgba(0,0,0,0.85);*/
  /*background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));*/
 
  background-color: #000;
  background: rgba(0,0,0,0.85);
  background: -moz-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);
  background: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%,rgba(0, 0, 0, 0.7) 100%);
  background: -o-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);
  background: -ms-radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);
  background: radial-gradient(50% 50%, ellipse cover, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 33%,rgba(0, 0, 0, 0.7) 100%);

  color: #fff;
  font-size: 16px;
  overflow: auto;
}

.modal table, .modal h2 {
  margin: 20px auto;
  padding: 20px;
  max-width: 560px;
  background: #000;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 80px #505050;
  -moz-box-shadow: 0 5px 80px #505050;
  -o-box-shadow: 0 5px 80px #505050;
  -ms-box-shadow: 0 5px 80px #505050;
}

.modal h2 {
  margin-top: 5%;
  margin-bottom: 0; 
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; 
}

.modal table {
  border-top-right-radius: 0;
  border-top-left-radius: 0; 
  margin-top: 0;
  width: 600px;
}

.modal thead th {
  text-align: left;
}

.modal tbody tr {
  height: 30px;
}

.modal tbody td:first-child {
  font-family: MesloLGMDZ, "MenschRegular";
  padding-right: 20px;
  color: yellow;
}

.modal .shortcut {
  width: 260px;
}

#login, #register {
  position: absolute;
  right: -10px;
}

#login > div,
#register > div {
  /*background: #e0e0e0;*/
  padding: 10px; 
}

#register {
  width: 200px;
}

#register p {
  margin-top: 0;
  font-size: 12px;
  white-space: normal;
  line-height: 18px;
}

#lostpass {
  font-size: 11px;
}

form {
  margin: 0; 
}

form div {
  margin-top: 5px;
}

form div:first-child {
  margin-top: 0;
}

form label {
  display: block;
  /*font-size: 12px;*/
  margin-left: 2px;
  line-height: 20px;
  font-weight: bold;
}

form input[type="text"],
form input[type="password"],
form input[type="email"] {
  border: 2px solid #b7dffd;
  width: 95%;
}

/*
#login > div {
  margin: 20px auto;
  margin-top: 5%;
  padding: 20px;
  width: 380px;
  background: #000;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 80px #505050;
  -moz-box-shadow: 0 5px 80px #505050;
  -o-box-shadow: 0 5px 80px #505050;
  -ms-box-shadow: 0 5px 80px #505050;
  box-shadow: none;
}

#login h2 {
  margin-top: 0;
  padding: 0;
  background: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

#login form div {
  margin: 10px;
}

#login form div label {
  float: left;
  display: block;
  width: 100px;
  line-height: 28px;
  text-align: right;
  margin-right: 10px;
}

#login form input {
  font-family: sans-serif;
  padding: 2px;
  font-size: 14px;
}

#login form input[type=submit] {
  font-size: 18px;
}

#login p {
  font-size: 13px;
}

*/

.loginFeedback {
  display: none;
  padding: 3px;
  background: #f3b8b6;
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid red;
  margin: 10px 0;
}

/*#loginFeedback:empty {
  display: none;
}
*/
/* codemirror2 styles */
.CodeMirror-scroll {
  margin: 0;
}

.CodeMirror .CodeMirror-scroll > div {
  margin: .6em;
}

.javascript .CodeMirror-scroll > div {
  /*margin-top: 25px;*/
}

.html .CodeMirror-scroll > div {
  /*margin-top: 60px;*/
}


.editbox .CodeMirror {
  height: 100%;
  top: 0;
  bottom: 0;
  line-height: 1.2em;
  font-family: MesloLGMDZ, MenschRegular, Menlo, Monaco, consolas, monospace;
  font-size: 13px;
}


/* begin CodeMirror's own CSS */
.CodeMirror {
  line-height: 1em;
  font-family: monospace;
}

.CodeMirror-scroll {
  overflow: auto;
  height: 300px;
  /* This is needed to prevent an IE[67] bug where the scrolled content
     is visible outside of the scrolling box. */
  position: relative;
  outline: none;
}

.CodeMirror-gutter {
  position: absolute; left: 0; top: 0;
  z-index: 10;
  background-color: #f7f7f7;
  border-right: 1px solid #eee;
  min-width: 2em;
  height: 100%;
}
.CodeMirror-gutter-text {
  color: #aaa;
  text-align: right;
  padding: .4em .2em .4em .4em;
  white-space: pre !important;
}
.CodeMirror-lines {
  padding: .4em;
  white-space: pre;
}

.CodeMirror pre {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  border-width: 0; margin: 0; padding: 0; background: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0; margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
}

.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}
.CodeMirror-wrap .CodeMirror-scroll {
  overflow-x: hidden;
}

.CodeMirror textarea {
  outline: none !important;
}

.CodeMirror pre.CodeMirror-cursor {
  z-index: 10;
  position: absolute;
  visibility: hidden;
  border-left: 1px solid black;
  border-right:none;
  width:0;
}
.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
.CodeMirror-focused pre.CodeMirror-cursor {
  visibility: visible;
}

div.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }

.CodeMirror-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);
}

/* Default theme */

.cm-s-default span.cm-keyword {color: #708;}
.cm-s-default span.cm-atom {color: #219;}
.cm-s-default span.cm-number {color: #164;}
.cm-s-default span.cm-def {color: #00f;}
.cm-s-default span.cm-variable {color: black;}
.cm-s-default span.cm-variable-2 {color: #05a;}
.cm-s-default span.cm-variable-3 {color: #085;}
.cm-s-default span.cm-property {color: black;}
.cm-s-default span.cm-operator {color: black;}
.cm-s-default span.cm-comment {color: #a50;}
.cm-s-default span.cm-string {color: #a11;}
.cm-s-default span.cm-string-2 {color: #f50;}
.cm-s-default span.cm-meta {color: #555;}
.cm-s-default span.cm-error {color: #f00;}
.cm-s-default span.cm-qualifier {color: #555;}
.cm-s-default span.cm-builtin {color: #30a;}
.cm-s-default span.cm-bracket {color: #cc7;}
.cm-s-default span.cm-tag {color: #170;}
.cm-s-default span.cm-attribute {color: #00c;}
.cm-s-default span.cm-header {color: #a0a;}
.cm-s-default span.cm-quote {color: #090;}
.cm-s-default span.cm-hr {color: #999;}
.cm-s-default span.cm-link {color: #00c;}

span.cm-header, span.cm-strong {font-weight: bold;}
span.cm-em {font-style: italic;}
span.cm-emstrong {font-style: italic; font-weight: bold;}
span.cm-link {text-decoration: underline;}

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

/* jsbin - based on web inspector */
.cm-s-jsbin span.cm-keyword {color: #AA0D91;}
.cm-s-jsbin span.cm-atom {color: #219;}
.cm-s-jsbin span.cm-number {color: #164;}
.cm-s-jsbin span.cm-def {color: #00f;}
.cm-s-jsbin span.cm-variable {color: black;}
.cm-s-jsbin span.cm-variable-2 {color: #05a;}
.cm-s-jsbin span.cm-variable-3 {color: #0a5;}
.cm-s-jsbin span.cm-property {color: black;}
.cm-s-jsbin span.cm-operator {color: black;}
.cm-s-jsbin span.cm-comment {color: #236E25;}
.cm-s-jsbin span.cm-string {color: #C41A16;}
.cm-s-jsbin span.cm-meta {color: #555;}
.cm-s-jsbin span.cm-error {color: #f00;}
.cm-s-jsbin span.cm-qualifier {color: #555;}
.cm-s-jsbin span.cm-builtin {color: #30a;}
.cm-s-jsbin span.cm-bracket {color: #cc7;}
.cm-s-jsbin span.cm-tag {color: #881280;}
.cm-s-jsbin span.cm-attribute {color: #994500;}


/* neat */
.cm-s-neat span.cm-comment { color: #a86; }
.cm-s-neat span.cm-keyword { font-weight: bold; color: blue; }
.cm-s-neat span.cm-string { color: #a22; }
.cm-s-neat span.cm-builtin { font-weight: bold; color: #077; }
.cm-s-neat span.cm-special { font-weight: bold; color: #0aa; }
.cm-s-neat span.cm-variable { color: black; }
.cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; }
.cm-s-neat span.cm-meta {color: #555;}

/* elegant */
.cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {color: #762;}
.cm-s-elegant span.cm-comment {color: #262;font-style: italic;}
.cm-s-elegant span.cm-meta {color: #555;font-style: italic;}
.cm-s-elegant span.cm-variable {color: black;}
.cm-s-elegant span.cm-variable-2 {color: #b11;}
.cm-s-elegant span.cm-qualifier {color: #555;}
.cm-s-elegant span.cm-keyword {color: #730;}
.cm-s-elegant span.cm-builtin {color: #30a;}
.cm-s-elegant span.cm-error {background-color: #fdd;}

/* Loosely based on the Midnight Textmate theme */

.cm-s-night { background: #0a001f; color: #f8f8f8; }
.cm-s-night span.CodeMirror-selected { background: #a8f !important; }
.cm-s-night .CodeMirror-gutter { background: #0a001f; border-right: 1px solid #aaa; }
.cm-s-night .CodeMirror-gutter-text { color: #f8f8f8; }
.cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-night span.cm-comment { color: #6900a1; }
.cm-s-night span.cm-atom { color: #845dc4; }
.cm-s-night span.cm-number { color: #ffd500; }
.cm-s-night span.cm-keyword { color: #599eff; }
.cm-s-night span.cm-string { color: #37f14a; }
.cm-s-night span.cm-meta { color: #7678e2; }
.cm-s-night span.cm-variable-2 { color: #99b2ff; }
.cm-s-night span.cm-variable-3, .cm-s-night span.cm-def { white; }
.cm-s-night span.cm-error { color: #9d1e15; }
.cm-s-night span.cm-bracket { color: #8da6ce; }
.cm-s-night span.cm-comment { color: #6900a1; }
.cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; }

.ready #bin {
  opacity: 1;
/*  filter:alpha(opacity=1);*/
}

.mobile .html {
  border-left: 2px solid #ccc;
}

.mobile .editbox > div {
  background: #fff;
}

.CodeMirror-lines pre {
/*  white-space: normal;*/
  /*min-height: 14px;*/ /* 12px font-size + arb padding 2px - this increases depending on the font-size */
}

.CodeMirror-lines > div {
/*  width: auto !important;*/
}

.CodeMirror-lines pre.CodeMirror-cursor {
/*  white-space: pre;*/
}

#source > div {
  -webkit-transition: left ease-out 100ms, right ease-out 100ms;
  -moz-transition: left ease-out 100ms, right ease-out 100ms;
  -o-transition: left ease-out 100ms, right ease-out 100ms;
  transition: left ease-out 100ms, right ease-out 100ms;
}

/* cancel effects when dragging - otherwise it looks lame and sluggish */
.dragging * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.panel {
  /*display: none;*/
  background: #fff;
  background: hsl(0, 0%, 98%);
}

.panelwrapper {
  border-left: 1px solid #ccc;
}

.panel:first-child {
  border-left: 0;
}

.panel .label {
  display: block;
  position: relative;
  /*background: #FAFAFA;*/
  /*border-bottom: 1px solid #ededed;*/
}

.focus .label {
  /*background-color: #DBE4F5;*/
  /*box-shadow: inset 0 0 10px #DBE4F5;*/
  /*box-shadow:         inset 0 0 10px #000000;*/
  /*background-color: hsl(215, 100%, 96%)*/
  background: rgb(179,218,252); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(179,218,252,1) 0%, rgba(198,242,255,1) 8%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,218,252,1)), color-stop(8%,rgba(198,242,255,1)), color-stop(16%,rgba(255,255,255,)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(179,218,252,1) 0%,rgba(198,242,255,1) 8%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(179,218,252,1) 0%,rgba(198,242,255,1) 8%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(179,218,252,1) 0%,rgba(198,242,255,1) 8%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: linear-gradient(top,  rgba(179,218,252,1) 0%,rgba(198,242,255,1) 8%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dafc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  border-right: 1px solid #ccc;
}

.ie .focus .label {
  background-position: -10px 0;
}


.panel .label p {
  cursor: pointer;
}

.panel .label .close:before {
  font-size: 14px;
  color: #ccc;
  font-weight: normal;
  font-family: sans-serif;
  content: "\f057";
}

.panel .label .close {
  display: inline-block;
  text-decoration: none;
  padding: 10px;
}

.panel .label .close:hover:before {
  color: #000;
}

.label {
  padding: 0;
  margin: 0; 
  padding-right: 0;
  position: absolute;
  z-index: 10;
}

.label p {
/*  display: inline;*/
  font-weight: bold;
/*  cursor: pointer;*/
}

.label label {
  margin-top: 10px;
}

/*.code .label p > span {
  opacity: 0;
  filter:alpha(opacity=0);
  -webkit-transition: opacity 250ms linear;
  -moz-transition: opacity 250ms linear;
}

.code .label p:hover span {
  opacity: 1;
  filter:alpha(opacity=1);
}
*/
.group.menu .button {
  float: none;

}

.icon.icon-download-alt:before {
  /*padding-right: 10px;*/
}

.icon { font-family: sans-serif; }
.button-dropdown:after,
.fake-dropdown:after { content: "▾"; padding-left: 5px; padding-right: 3px; }
.button-dropdown:empty:after,
.fake-dropdown:empty:after { padding-left: 0; }


.editbox {
  background: white;
  /*padding-top: 5px;*/
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
}

a.active {
  background-color: #EBF3FF;
  background-color: hsl(215, 100%, 96%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-top: 1px solid #AAA;
  border-left: 1px solid #AAA;
}

a.active:hover {
  /*-moz-box-shadow: #fff 0 0 5px;*/
  background-color: hsl(215, 100%, 98%);
  z-index: 1;
}

.console {
  background: #fff;
}

#console { bottom: 35px; left: 0; right: 0; width: 100%; margin-bottom: 35px; overflow: auto; /*border-bottom: 1px solid #5B5C5B;*/ }

#output { list-style: none; margin: 0; padding: 0; }
#output li { margin: 5px 0; padding: 5px; border-top: 1px solid #EEEFEE; white-space: pre-wrap; padding-bottom: 0; }
#output li:last-child { border-bottom: 0;}
#output > li > div { margin-left: 20px; line-height: 20px; }
#console span.gutter { float: left; display: block; width: 5px; }

#output li div { position: relative; }
#output .echo .permalink { position: absolute; right: 0; overflow: hidden; display: block; background: url(link.png) no-repeat center; height: 20px; width: 30px; text-indent: -200px; top: 0; opacity: 0.5; }

#output .echo .permalink:hover { opacity: 1; }

/* log types */
/*#output span.gutter:before { position: absolute; }*/
#output span.gutter { font-family: monospace; font-size: 13px; line-height: 14px; }
#output .echo span.gutter:before { content: '❯ '; color: #3583FC; font-weight: bold; margin-left: 5px; }
#output .info span.gutter:before { content: 'i '; color: #27A700; font-weight: bold; margin-left: 4px; }
#output .error span.gutter:before { content: '× '; color: #E81D20; margin-right: -10px; margin-left: 2px; font-size: 20px; font-weight: bold; }
#output .response span.gutter:before { content: '« '; color: #BDC3CD; margin-right: -10px; font-size: 20px; }

/* if response is directly next to echo, don't give it a line - only consoles get lines */
#output li.echo + li.response { border-width: 0; }

/* hard line on new echo */
#output li.response + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.error + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.log + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.info + li.echo { border-width: 2px; border-color: #DFDFDF; }
/*#output li.info .response span { line-height: 30px; }*/

#output li.echo:first-child { border-width: 0;}
#output li:first-child { border-width: 0; padding-top: 0; }

#jsconsole-sandbox { display: none;}

/* font size control */
/*#console { top: 35px; bottom: 35px; }*/
#output li, #exec, .fakeInput { min-height: 20px; font-size: 13px; font-family: MesloLGMDZ, MenschRegular, "Menlo", consolas, monospace; }

/** Pretty printing styles. Used with prettify.js. */

#output .str { color: #080; }
#output .kwd { color: #008; }
#output .com { color: #800; }
#output .typ { color: #606; }
#output .lit { color: #066; }
#output .pun { color: #660; }
#output .pln { color: #000; }
#output .tag { color: #008; }
#output .atn { color: #606; }
#output .atv { color: #080; }
#output .dec { color: #606; }
#output .error span { color: #E81D20;}

.dropdown {
  display: none;
  height: auto;
  /*border-bottom-right-radius: 5px;*/
  position: absolute;
  /*padding: 3px 20px 10px 3px;*/
  padding: 0;
}

.dropdownmenu,
.dropdowncontent {
  margin: 3px 5px;
  background: white;
  box-shadow: 1px 4px 7px rgba(0,0,0,0.2);;
  border: 1px solid #CCC;
  height: auto;
  border-radius: 5px;
  text-align: left;
}

.open .dropdown {
  display: block;
}

.dropdownmenu > a {
  display: block;
  float: none;
  border-right: 0;
  /*padding: 5px 20px 5px 25px;*/
  padding: 5px 20px 5px 10px;
}

.dropdownmenu form {
  margin: 0;
  padding: 0;
}

.dropdown .button:last-child:hover {
  /*border-bottom-right-radius: 5px;*/
}

.dropdown > .button:hover {
  background: #aaa;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.menu > a.button {
  display: inline-block;
  position: relative;
}

#panels {
  /*width: 480px;*/
  /*margin: 3px auto 0 auto;*/
  text-align: center;
  overflow: hidden;
  /*background-color: #fff;*/
  /*background-image: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);*/
  /*background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);*/
  /*background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);*/
  /*background-image: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);*/
  /*background-image: linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);*/
  position: absolute;
  top: 0;
  width: 100%;
  /*z-index: 99;*/
  padding-top: 2px;
}

.embed #panels {
  background: url(/images/jsbin_header.png) no-repeat 6px -2px;
  min-height: 33px;
}

#panels a {
  text-decoration: none;
  display: inline-block;
  float: none;
}

.open .button-dropdown,
.open .button-dropdown:hover,
.open .button-open,
.open .button-open:hover {
  background: #eee;
}

#panels .button {
  height: 17px;
  line-height: 19px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid hsl(0, 0%, 80%);
}

#panels .button.active {
  border-left: 0;
}

#panels .button:first-child {
  border-left: 1px solid #ccc;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#panels .button:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.label {
  /*overflow: hidden;*/
  /*min-height: 34px;*/
  /*line-height: 34px;*/
  padding: 10px 10px 0 10px;
  line-height: 20px;
}

.label label {
  margin: 0;
}

.label .options {
  float: right;
  display: block;
  background: #fff;
  /*height: 35px;*/
  /*margin-right: 10px;*/
}

.label .options label {
  /*height: 35px;*/
  display: inline-block;
  cursor: pointer;
}

.label .options label input {
  margin-left: 5px;
}

.label button { 
  margin-right: 10px;
}

/* history listings */
#history .thumb {
  border: 1px solid #ccc;
  overflow: hidden;
  height: 145px;
  width: 193px;
  margin: 10px 0;
}

#history iframe {
  -moz-transform:    scale(0.8);
  -o-transform:      scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform:         scale(0.8);
  /* IE8+ - must be on one line, unfortunately */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8, M12=0, M21=0, M22=0.8, SizingMethod='auto expand')";

  /* IE6 and 7 */ 
  filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=0.8,
           M12=0,
           M21=0,
           M22=0.8,
           SizingMethod='auto expand');

  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

  width: 100%;
  height: 100%;
}

.panelsVisible #history {
  display: none;
  top: 2000px; /* :( can't do 100% */
}

.panelsVisible #history .preview {
  right: -1000px;
}

#history {
  z-index: 0;
  /*position: absolute;*/
  /*top: 31px;*/
  -webkit-transition: top ease-out 200ms;
  font-family: MesloLGMDZ, MenschRegular, Menlo, Monaco, consolas, monospace;
  text-shadow: none;
  /*-webkit-transition-delay: 100ms;*/
  font-size: 13px;
  padding: 40px 0 10px 0;
  position: absolute;
  /*height: 100%;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
  display: none;
}

.ready #history {
  display: block;
}

#history .preview {
  -webkit-transition: right ease-out 200ms;

  border-left: 1px solid #ccc;
  position: fixed;
  top: 31px;
  width: 30%;
  right: 0;
  height: 100%;
  padding-top: 10px;
  background: #fff;
}

#history h2 {
  margin: 0;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 13px;
  padding: 10px 20px;
}

#history #bins h2 {
  margin-bottom: 10px;
}

#history table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 70%;
  position: relative;
}

#history tr {
  cursor: pointer;
  background: #fff;
}

#history td {
  margin: 0;
  padding: 3px 0;
}

#history a {
  font-weight: normal;
  text-decoration: none;
  color: #000;
  text-shadow: none;
}

#history .url {
  text-align: right;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
}

#history .url a {
  color: #0097fe;
}

#history .url a span {
  color: #000;
  visibility: hidden;
}

#history .url span.first {
  visibility: visible;
}

#history .created {
  width: 25%;
}

#history .created a {
  color: #ccc;
}

#history .title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#history tr:hover *,
#history tr.hover *,
#history tr:hover span,
#history tr.hover span {
  background: #0097fe;
  color: #fff;
  /*cursor: pointer;*/
}

#history tr[data-type=spacer]:hover * {
  background: #fff;
  cursor: default;
}

#history iframe {
  border: 0;
  display: block;
  margin: 0 auto;
  width: 90%;
}

#history #viewing {
  font-size: 10px;
  margin: 0 10px 10px 20px;
}

/*@media (max-height:770px) {*/
.hideheader.ready #control {
  border-bottom: 6px solid #AAA;
  -webkit-transition: top ease-out 200ms, border-bottom ease-out 200ms;
  -webkit-transition-delay: 1s;
  -moz-transition: top ease-out 200ms, border-bottom ease-out 200ms;
  -moz-transition-delay: 1s;
  -o-transition: top ease-out 200ms, border-bottom ease-out 200ms;
  -o-transition-delay: 1s;
  -ms-transition: top ease-out 200ms, border-bottom ease-out 200ms;
  -ms-transition-delay: 1s;
  transition: top ease-out 200ms, border-bottom ease-out 200ms;
  transition-delay: 1s;
  top: -35px;
}

.hideheader.ready #bin, 
.hideheader #history, 
.hideheader #history .preview {
  top: 6px;
}

.hideheader #control:hover {
  top: 0;
  -webkit-transition: top ease-out 10ms;
  -moz-transition: top ease-out 10ms;
  -o-transition: top ease-out 10ms;
  -ms-transition: top ease-out 10ms;
  transition: top ease-out 10ms;
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  transition-delay: 100ms;
}

#panelswaiting {
  display: none;
}

#actionmenu {
  top: 100%;
  left: -10px;
}

.dropdownmenu {
  margin: 3px 5px;
}

.dropdownmenu a {
  padding: 5px 30px 5px 15px;
}

#save {
  width: 50px;
  position: relative;
  z-index: 1;
}

#control .file {
  padding-left: 10px;
}

.code .name {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 165px;
  /* allow a black theme but for the text to still be readable */
  /*text-shadow: -2px 0 10px white, 2px 0 10px white, 0 2px 10px white, 0 -2px 10px white;*/
}

.name span {
  /*margin-left: -41px;*/
  padding-left: 4px;
  color: #999;
  opacity: 0;
}

/* these versions of IE don't support the history API anyway */
.ie .name span {
  display: none;
}

#popout {
  margin-left: 5px;
}

.highlight {
    border: 1px solid rgb(255,235,0);
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
  border-radius: 3px;
  padding: 2px 5px;
  margin: -2px 1px;
  text-shadow: 0 1px 0 rgba(255,255,0, 0.5);
  cursor: default;
  
  background: #ff0;
  background: -moz-linear-gradient(top,  #ffff00 0%, #ffd800 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff00), color-stop(50%,#ffd800));
  background: -webkit-linear-gradient(top,  #ffff00 0%,#ffd800 50%);
  background: -o-linear-gradient(top,  #ffff00 0%,#ffd800 50%);
  background: -ms-linear-gradient(top,  #ffff00 0%,#ffd800 50%);
  background: linear-gradient(top,  #ffff00 0%,#ffd800 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffd800',GradientType=0 );
}

/*pre .highlight:first-of-type {
  border-left: 1px solid rgb(255,235,0);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  padding-left: 5px;
}

pre .highlight:last-of-type {
  border-right: 1px solid rgb(255,235,0);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  padding-right: 5px;
}*/

.dd-right {
  right: -10px;
}

#jsbinurl.hidden {
  position: absolute;
  opacity: 0;
  margin-right: -10px;
  overflow: hidden;
  width: 0;
  /*padding: 0;*/
}

#jsbinurl {
  width: auto;
  -webkit-transition-property: opacity, margin-right;
  -webkit-transition-timing-function: ease-out, ease-out; 
  -webkit-transition-duration: 100ms, 100ms;

  -webkit-transition: all ease-out 100ms;

  -moz-transition-property: opacity, margin-right;
  -moz-transition-timing-function: ease-out, ease-out; 
  -moz-transition-duration: 100ms, 100ms;

  -moz-transition: all ease-out 100ms;

  -o-transition-property: opacity, margin-right;
  -o-transition-timing-function: ease-out, ease-out; 
  -o-transition-duration: 100ms, 100ms;

  -ms-transition-property: opacity, margin-right;
  -ms-transition-timing-function: ease-out, ease-out; 
  -ms-transition-duration: 100ms, 100ms;

  transition-property: opacity, margin-right;
  transition-timing-function: ease-out, ease-out; 
  transition-duration: 100ms, 100ms;
}