/**
 * Base
 */
body {
  font-family: "Lucida Grande", Verdana, Arial, sans-serif;
  font-size: 12px;
  margin: 0;
}
a,
a:visited {
  color: #3B5998;
  text-decoration: none;
  cursor: pointer;
}
h2 {
  margin: 0 0 0 0.25em;
  color: #666;
  font-size: 136%;
}
html.orange body {
  background-color: #D18111;
}

/**
 * For Old Connect
 */
#FB_HiddenContainer {
  position: absolute;
  top: -10000px;
  height: 0;
  width: 0;
}

/**
 * Buttons
 */
.fb-blue, .fb-gray {
  display: inline-block;
  outline: medium none;
  border-width: 1px;
  border-style: solid;
  padding: 0;
  margin: 0;
}
.fb-blue span, .fb-blue input, .fb-gray span, .fb-gray input {
  line-height: 14px;
  border: none;
  border-top-width: 1px;
  border-top-style: solid;
  display: block;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px 5px 10px;
  margin: 0;
}
/* for removing firefox crap */
.fb-blue input::-moz-focus-inner, .fb-gray input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.fb-blue {
  border-color: #29447E #29447E #1A356E;
}
.fb-blue span, .fb-blue input {
  background: url(https://s-static.ak.fbcdn.net/images/connect_sprite.png) repeat scroll 0 0 #5F78AB;
  border-top-color: #879AC0;
  color: #ffffff;
}
.fb-gray {
  border-color: #888;
}
.fb-gray span, .fb-gray input {
  background: #eeeeee url(https://s-static.ak.fbcdn.net/rsrc.php/zq/r/K3tOGSfSE3X.png) repeat 0 0;
  border-top-color: #efefef;
  color: #333333;
}

/**
 * Prettyness
 */
#rell-login {
  background: url(https://s-static.ak.fbcdn.net/images/connect_sprite.png) no-repeat scroll left -188px #29447E;
  display: inline-block;
  line-height: 14px;
  outline: medium none;
  padding: 0 0 0 1px;
}
#rell-login span {
  background: url(https://s-static.ak.fbcdn.net/images/connect_sprite.png) repeat scroll 0 0 #5F78AB;
  border-bottom: 1px solid #1A356E;
  border-top: 1px solid #879AC0;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-size: 11px;
  font-weight: bold;
  margin: 1px 1px 0 21px;
  padding: 2px 6px 3px;
}

#rell-run-code {
  float: right;
  margin-left: 0.5em;
}
.save-code {
  float: right;
}

.not-found {
  text-align: center;
  margin-top: 15%;
}

/**
 * Narrow View
 */
.narrow .bd {
  width: 520px;
  margin: 0 auto;
}
.narrow h1 {
  font-variant: small-caps;
}
.narrow h1 a {
  color: #000000;
}
.narrow dt {
  font-weight: bold;
}
.narrow dl strong {
  font-family: "Menlo Regular", Monaco, Consolas, monospace;
  font-size: 87%;
}
.narrow img {
  max-width: 520px;
}

/**
 * /og stuff
 */
.lint-this {
  margin-top: 1.5em;
  display: block;
}

/**
 * Info table
 */
table.info {
  text-align: left;
  border: 1px solid #1D4088;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  width: 100%;
}
table.info th, table.info td {
  padding: 0.4em 0.5em;
}
table.info thead th, table.info thead td {
  background-color: #627AAD;
  color: #ffffff;
}
table.info tbody tr:hover th, table.info tbody tr:hover td {
  background-color: #efefef;
}
table.info tbody th {
  color: #808080;
}
table.info td {
  word-break: break-all;
}

/**
 * Interactive
 */
#interactive {
  width: 59%;
  float: left;
  background-color: #fff;
}
#log-container {
  width: 40%;
  float: right;
}
#log-container .controls {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  padding: 0.5em 2.5em;
  text-align: right;
  background: rgba(82, 82, 82, 0.695312);
}
#log-container:hover .controls {
  display: block;
}
#log {
  overflow: auto;
}

/**
 * General
 */
.controls {
  margin: 0.5em 0 0.25em 0.4em;
}

/**
 * auth status
 */
#auth-status-label {
  padding-left: 1em;
}
#auth-status-label, span.bar {
  color: #777777;
}
#auth-status {
  color: #000000;
  padding-left: 0.3em;
  text-transform: capitalize;
}
span.bar {
  padding-left: 0.2em;
  padding-right: 0.2em;
}

/**
 * Interactive
 */
#jscode {
  width: 99%;
  height: 390px;
  margin: 0.25em;
  font-family: "Menlo Regular", Monaco, Consolas, monospace;
  font-size: 12px;
}
.CodeMirror-wrapping {
  border: 1px solid #000;
  margin: 6px 0 0 3px;
}
#jsurl {
  width: 80%;
}
#jsroot {
  margin: 1em;
}
#jsroot h1 {
  color: #666;
  font-size: 130%;
  font-family: "Arial Rounded", sans-serif;
  margin-top: 2em;
}
#jsroot h1:first-child {
  margin-top: auto;
}

/**
 * Log
 */
#log .hd {
  padding: 0.5em 1.5em;
  font-weight: bold;
  background: #f2f2f2;
}
#log .hd .toggle {
  cursor: pointer;
  color: #5c5c5c;
}
#log .hd .count {
  padding-right: 10px;
  color: #5c5c5c;
}
#log .bd {
  padding: 0.5em 1em;
  background-color: #E6EDFA;
  font-family: "Menlo Regular", Monaco, Consolas, monospace;
  border-top: 1px solid green;
}

#log .indent-0 {
  margin-left: 0;
}
#log .indent-1 {
  margin-left: 1em;
}
#log .indent-2 {
  margin-left: 2em;
}
#log .indent-3 {
  margin-left: 3em;
}
#log .indent-4 {
  margin-left: 4em;
}
#log .indent-5 {
  margin-left: 5em;
}
#log .indent-6 {
  margin-left: 6em;
}
#log .indent-7 {
  margin-left: 7em;
}
#log .indent-8 {
  margin-left: 8em;
}



/**
 * Examples
 */
.examples {
  margin: 0.5em 1em;
}



/**
 * Like Button
 */
.like {
  border: none;
  overflow: hidden;
  width: 450px;
  height: 80px;
  margin: 1em 0;
}