/* $Id: console.css,v 1.31 2009/05/23 14:18:54 rwhalb Exp $
 *
 * CSS to go with the "console.js" file to set the look of the 
 * NST JavaScript debug console.
 *
 * The console is currently a DOM inserted entity of the following form:
 *
 * <div class="nstConsole">
 *
 *   [ <div>OPTIONAL CUSTOM USER NODE</div> ]
 *
 *   <div class="nstConsoleTop">
 *     <div class="nstConsoleOutput">
 *     </div>
 *   </div>
 *
 *   <div id=class="nstConsoleBot">
 *     <div id=class="nstConsoleBotLeft">
 *       <div id=class="nstConsoleButtons">
 *          <!-- NST JavaScript Console Buttons -->
 *       </div>
 *       <!-- Optional - if user implements createFooterArea() method. -->
 *       <div id=class="nstConsoleFooter">
 *          <!-- User buttons -->
 *       </div>
 *     </div>
 *
 *     <div class="nstConsoleBotRight">
 *       <div class="nstConsoleInputDiv">
 *         <textarea id="nstConsoleInput" />
 *         <input id="nstConsoleOneLiner" />
 *         <div id="nstConsoleOneLinerSeparator" />
 *       </div>
 *     </div>
 *   </div>
 * </div>
 *
 */

/* Initialize width so things will fit nicely. */

div.nstConsole, div.nstConsoleTop, div.nstConsoleBot,
div.nstConsoleBotLeft, div.nstConsoleBotRight, div.nstConsoleFooter,
div.nstConsoleInputDiv, div.nstConsoleOutput, 
table.nstConsoleMiniButtons,
td.nstConsoleButtons, td.nstConsoleInput,
#nstConsoleInput, #nstConsoleOneLiner,
pre.nstConsoleEchoOutput, pre.nstConsoleEvalOutput, pre.nstConsoleErrorOutput {
  margin: 0;
  border-width: 0;
  border-style: none;
  padding: 0;
  width: auto;
  line-height: normal;
}

div.nstConsole, div.nstConsoleTop, div.nstConsoleBot {
  width: 100%;
}

/* Top area of layout. */
div.nstConsoleTop {
}

div.nstConsoleFooter {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
}

/* Bottom left area of layout. */
div.nstConsoleBotLeft {
  position: absolute;
  left: 0px;

  /* fixed width of button area */
  width: 130px;

  margin: 0;
  padding: 0;
  border: 0;

  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: white;

  background-color: #000030;
}

/* Bottom right area of layout. */
div.nstConsoleBotRight {
  position: absolute;

  /* compensate for left-border and indentation for input area:
   * 2 pixels - border, 5 pixels - indentation */
  left: 137px;
  right: 0px;

  margin: 0;
  padding: 0;
  border: 0;

  background-color: #000030;
}

/* Table used for "mini" text buttons next to input area. */
table.nstConsoleMiniButtons {
  width: 100%;
}

/* Output <div> - will contain MANY <pre> elements. */
div.nstConsoleOutput {
  overflow: scroll;

  /* Set width back to auto so we can enable borders. */
  width: 100%;

  font-family: monospace;
  font-size: 10pt;
  font-weight: normal;

  color: #33FF33;
  background-color: black;
  text-align: left;
}

/* <pre> element added to output <div> for evaluated code. */
pre.nstConsoleEvalOutput {
  color: white;
}

/* <pre> element added to output <div> for error output. */
pre.nstConsoleErrorOutput {
  color: #ff4040;
}

/* <span> elements used for line numbers in output <pre> blocks. */

span.nstConsoleLineNumber {
  color: yellow;
  width: 3em;
  text-align: right;
  margin-right: 2mm;
}

/*
 * Style for wrap indicator "\" which appears at the end of long
 * lines in the output console if NstConsole.setLineLength(len) is
 * set to a value larger than 0.
 */

span.nstConsoleWrapIndicator {
  color: yellow;
  padding-left: 1px;
}

/* <td> wrapper around button area of console. */

div.nstConsoleButtons {
  vertical-align: top;
  width: 130px;
  overflow: hidden;
}

/* <textarea> element in input <div> for user JavaScript code. */

div.nstConsoleInputDiv {

  /* Match color of user input text. */
  color: white;
  background-color: black;
}

#nstConsoleInput, #nstConsoleOneLiner {
  font-family: monospace;
  font-size: 10pt;
  font-weight: normal;
  padding-left: 0.25em;

/*  cursor: text; */
  color: white;
  background-color: black;

  width: 100%;
}

#nstConsoleInput {
  overflow-y: scroll;
  overflow-x: auto;
}

#nstConsoleOneLiner {
  height: 15pt;
}

#nstConsoleOneLinerSeparator {
  text-align: left;
  border-color: green;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 2px;
  border-left-width: 0px;

  margin: 0px;
  padding: 0px;
}

/* Button styles (which appear on left side of console). */

a.nstConsoleButton, button.nstConsoleButton,
a.nstConsoleButton:active, a.nstConsoleButton:visited,
a.nstConsoleButton:hover {
  display: block;
  margin: 0px;
  white-space: nowrap;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
  text-decoration: none;
  outline: none;

  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;

  color: #aaaa11;
  background-color: #003366;

  border-style: solid;
  border-left-width: 3px;
  border-left-color: #1A588F;
  border-top-width: 3px;
  border-top-color: #658cb2;
  border-right-width: 3px;
  border-right-color: #001937;
  border-bottom-width: 3px;
  border-bottom-color: #00203f;
}

a.nstConsoleButton:hover, button.nstConsoleButton:hover {
  color: white;
  background-color: #003366;

  border-style: solid;
  border-left-width: 3px;
  border-left-color: #4c85af;
  border-top-width: 3px;
  border-top-color: #a7c5df;
  border-right-width: 3px;
  border-right-color: #14446f;
  border-bottom-width: 3px;
  border-bottom-color: #1f527f;
}

button.nstConsoleButton, button.nstConsoleButton:hover {
  padding: 0px;
  width: 100%;
}

/* Set background color of fill areas to match NST WUI bottom footer. */

div.nstConsole, div.nstConsoleTop {
  color: white;
  background-color: #000030;
}

/* This will be set to black in javascript when in
 * multi-line mode for a black left margin. */
div.nstConsoleBot {
  background-color: #000030;
}