/**
 * LiveCoder.net
 * http://livecoder.net
 * http://github.com/fritzo/livecoder.net
 *
 * Copyright (c) 2012, Fritz Obermeyer
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

body {
  color: white;
  background-color: black;
  font-size: 12pt;
  font-family: helvetica, verdana, sans;
}

.CodeMirror-completions select {
  color: #fff;
  background: #333;
}
body {
  width:  100%;
  height: 100%;
  margin: 0px;
}

canvas {
  position: fixed;
  top: 0px;
  left: 0px;
}

pre,
code,
textarea,
.CodeMirror,
.CodeMirror-dialog input,
.CodeMirror-completions select {
  font-family:
    /* serif */
    Courier,
    'Courier New',
    'Lucida Console',
    'Freemono',
    'Monaco',
    /* sans */
    'DejaVu Sans Mono',
    'Liberation Mono',
    'Droid Sans Mono',
    monospace;
}

.CodeMirror,
#editor textarea {
  position: fixed;
  font-weight: bold;
  font-size: small;
  line-height: 1em;

  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: none;
  resize: none;
  overflow: auto;
}
#source,
.CodeMirror {
  /*
  text-shadow: 1px 1px 0ex black,
               1px -1px 0ex black,
               -1px 1px 0ex black,
               -1px -1px 0ex black;
  */
  text-shadow: +1px +2px 0ex black,
               +1px -2px 0ex black,
               -1px +2px 0ex black,
               -1px -2px 0ex black,
               +2px +1px 0ex black,
               +2px -1px 0ex black,
               -2px +1px 0ex black,
               -2px -1px 0ex black;

  top: 0%;
  height: 100%;
  /*
  bottom: 2ex;
  */
  left: 1%;
  width: 99%;

  color: #ccffcc;
  background-color: rgba(0,0,0,0);
}
.CodeMirror-dialog,
.CodeMirror-completions {
  text-shadow: none;
}
#log {
  height: 10ex;
  bottom: 0ex;
  left: 1%;
  width: 99%;
  resize: vertical;


  color: #ffff00;
  background-color: rgba(0,0,0,0.666);
}

#chat {
  display: none;
  opacity: 0.666;
}
#chat textarea {
  display: block;
  position: fixed;
  left: 81%;
  width: 18%;
  color: white;
  font-family: helvetica, verdana, sans;
  font-size: small;
  color: white;
  border: solid 2px black;
  padding: 0;
  margin: 0;
  resize: none;
  overflow: auto;
  border-radius: 1ex;
}
#chatRead {
  top: 1%;
  height: 88%;
  background-color: rgb(31,31,31);
  outline: none;
}
#chatWrite {
  top: 91%;
  height: 8%;
  background-color: rgb(63,63,63);
}

.info {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 0px;

  font-size: medium;
  text-align: center;

  border: solid 12px;
  border-radius: 18px;
  background-color: #222222;
  border-color: #222222;
  opacity: 1;

  display: none; /* initially */
}
.info p {
  text-align: left;
}
.info a,
.info a:visited {
  color: #aaaaff;
  text-decoration: none;
  font-weight: bold;
}
.info h1,
.info h2 {
  color: #aaaaaa;
  font-weight: bold;
}

dl {
  text-align: left;
}
dt {
  float: left;
  clear: left;
  padding: 0.5em;
  text-align: right;
  font-weight: bold;
}
#help pre {
  text-align: left;
  font-size: small;
  color: white;
  /*
  background-color: black;
  */
}
#help span.key {
  color: #ffff00;
}

.statusFace {
  font-weight: bold;
  opacity: 100%;
}

#su {
  display: none;
}

.briefPreview {
  font-size: small;
  border: 0px;
  margin: 0px;
}
.fullPreview {
  font-size: small;
  border: solid 1px gray;
  padding:2px;
  margin: 0px;
  color: #ccffcc;
}
.timeago {
  font-size: small;
  text-align: right;
}
#gallery {
  position: absolute;
  bottom: 0px;
  max-height: 50%;
  display: none;
}
#gallery table {
  background-color: black;
}
#gallery table tr td {
  white-space: nowrap;
  padding: 0px 0.25em 0px 0.25em;
  vertical-align: top;
}

#galleryBox {
  margin: 0px;
  border: solid 2px black;
  color: white;
  background-color: #444444;
  font-weight: bold;
  font-size: small;
  border-radius: 4px;
}
#galleryBox:hover
{
  background-color: #666666;
}
#galleryBox,
#export,
#import {
  vertical-align: middle;
}
#importExport {
  display: none;
}

#shareBox {
  position: fixed;
  top: 10%;
  left: 10%;

  font-size: x-large;

  background-color: #444444;
  border: solid 12px #444444;
  border-radius: 18px;
  opacity: 1;
  display: none; /* initially */
}
#shareBox textarea {
  overflow: hidden;
  height: 5.2ex;

  font-family: helvetica, verdana, sans;
  font-weight: bold;
  font-size: large;
}
#shareBox button {
  color: white;
  border: solid 1px #aaaaaa;
  border-radius: 1ex;
  background-color: #777777;
  padding: 0.4ex;
  padding-left: 1ex;
  padding-right: 1ex;
  font-size: x-large;
}
#shareBox a {
  text-decoration: none;
}

/* back-to-front */
canvas { z-index: 0; }

/* .CodeMirror { z-index: 10; } */
/* .CodeMirror-completions { z-index: 10; } */
#source { z-index: 10; }
#log { z-index: 11; } /* in front of source, but usually hidden */

/* .CodeMirror-dialog { z-index: 15; } */

#chat { z-index: 18; }
#gallery { z-index: 19; }
.toolbar { z-index: 20; }

#shareBox { z-index: 29; }
#help { z-index: 30; }