/* Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file */
/* for details. All rights reserved. Use of this source code is governed by a */
/* BSD-style license that can be found in the LICENSE file. */

html {
  height: 100%;
  width: 100%;
}

body {
  background: #fff;
  margin: 0 0 0 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0.00);
  font-family: arial , sans-serif;
}

h3 {
  text-align: center;
}

.shell {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

.editor {
  font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace;
  color: hsl(220, 20%, 30%);
  background: white; /*hsl(220, 20%, 95%);*/
  margin: 0;
  padding: 0;
  overflow: auto;
  position: absolute;
  cursor: text;
  top: 0px;
  left: 0px;
  right: 50.3%; /* Should be 50% + Npx */

  /* TODO(jimhug): When can be selected and unselected, make graceful. */
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;

  box-shadow: 0 0 5px rgba(0, 0, 255, 1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
  border: 1px solid rgba(0,0,255, 0.8);
  border-radius: 4px;
}

.output {
  position: absolute;
  top: 0px;
  left: 50.3%;
  right: 0px;
  margin: 0;
  padding: 0;

  /* TODO(jimhug): When can be selected and unselected, make graceful. */
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;

  box-shadow: 0 0 5px rgba(128, 128, 0, 1);
 -webkit-box-shadow: 0 0 5px rgba(128, 128, 0, 1);
 -moz-box-shadow: 0 0 5px rgba(128, 128, 0, 1);
 border: 1px solid rgba(128, 128, 0, 0.8);
 border-radius: 4px;
}

.repl {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 50.3%;
  margin: 0;
  padding: 0;

  color: green;
  overflow: hidden;

  /* TODO(jimhug): When can be selected and unselected, make graceful. */
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;

  box-shadow: 0 0 5px rgba(0, 128, 0, 1);
 -webkit-box-shadow: 0 0 5px rgba(0, 128, 0, 1);
 -moz-box-shadow: 0 0 5px rgba(0, 128, 0, 1);
 border: 1px solid rgba(0, 128, 0, 0.8);
 border-radius: 4px;
}

.message {
  margin: 3px;
  border-bottom: 1px solid hsl(220,  20%, 75%);
  color: hsl(220,  20%, 30%);
  cursor: pointer;
  overflow: auto;
}

.message:hover {
  color: hsl(220,  20%, 0%);
  text-decoration: underline;
}

.errors {
  position: absolute;
  left: 50.3%;
  bottom: 0px;
  right: 0px;
  margin: 0;
  padding: 0;

  color: red;

  /* TODO(jimhug): When can be selected and unselected, make graceful. */
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;

  box-shadow: 0 0 5px rgba(128, 0, 0, 1);
 -webkit-box-shadow: 0 0 5px rgba(128, 0, 0, 1);
 -moz-box-shadow: 0 0 5px rgba(128, 0, 0, 1);
 border: 1px solid rgba(128, 0, 0, 0.8);
 border-radius: 4px;
}

.output iframe {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.code {
  white-space: pre;
  position: absolute;
  /* TODO(jimhug): Useful for debugging. */
  outline: 1px dotted rgba(0, 0, 0, 0.2);
}

/* Syntax highlighting. */
/* Note: these correspond to the constants in classify.dart. */
.code .e { color: hsl(  0, 100%, 70%); } /* Error */
.code .c { color: hsl(220,  20%, 65%); } /* Comment */
.code .i { color: hsl(220,  20%, 20%); } /* Identifier */
.code .k { color: hsl(220, 100%, 50%); } /* Keyword */
.code .p { color: hsl(220,  20%, 50%); } /* Punctuation */
.code .o { color: hsl(220,  40%, 50%); } /* Operator */
.code .s { color: hsl( 40,  90%, 40%); } /* String */
.code .n { color: hsl( 30,  70%, 50%); } /* Number */
.code .t { color: hsl(180,  40%, 40%); } /* Type Name */
.code .r { color: hsl(200, 100%, 50%); } /* Special Identifier */
.code .a { color: hsl(220, 100%, 45%); } /* Arrow */

/* Interpolated expressions within strings. */
.code .si {
  background: hsl(40, 100%, 93%);
}

/* Remove the background on strings themselves - this makes not
   interpolated strings look much better - unsure about nesting...*/
.code .s.si { background: rgba(255,255,255,0); }
.code .i.si { color: hsl(40, 30%, 30%); }
.code .p.si { color: hsl(40, 60%, 40%); }


.hiddenTextArea {
    z-index: -1000;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    opacity: 0;
}

.cursorDiv {
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.cursor {
  background: black;
  width: 1px;
  opacity: .9;
  position: absolute;
}

/* TODO(jimhug): Play with prettier versions of this using canvas. */
.selection {
  position: absolute;
  background: rgba(0,120,255, 0.25);
}

.blink {
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1.0s;
  /* This is reset on each move to keep cursor visible when moving. */
  -webkit-animation-delay: 300ms;
}


@-webkit-keyframes fade {
   0% { opacity: .9; }
  10% { opacity: 0; }
  50% { opacity: 0; }
  60% { opacity: .9; }
 100% { opacity: .9; }
}