body
{
  background-color:#222;
  font-family:"Courier New", Courier, monospace;
  color:#fff;
  font-size:12px;
  margin:0;
  padding:0;
  min-height:100%;
  min-width:100%;
  position:fixed;
}

canvas
{
  position:fixed;
  outline:0;
  top:0px;
  left:0px;
  height:100%;

  background-image:url("img/starsbackground.png");
  background-repeat:repeat;
}

a,p
{
  font-size:14px;
}

h1,h2,h3,h4,h5
{
  text-align:center;
  user-select: none;
  color:#FFFFFF;
}

div#context
{
  position:absolute;
  z-index:3;
  background-color:#000000;
  border:rgb(0, 168, 255) solid 1px;
  width:150px;
  min-height:30px;
  padding:8px;
}

div#tooltip
{
  position:absolute;
  z-index:3;
  background-color:#000000;
  border:rgb(0, 168, 255) solid 1px;
  width:150px;
  min-height:30px;
  padding:8px;
}

div#note
{
  position:absolute;
  z-index:2;
  background-color:#000000;
  border:rgb(0, 168, 255) solid 1px;
  width:400px;
}
div#movebar
{
  width:100%;
  height:16px;
  background-color:#00BFFF;
  margin:0px;
  position:relative;
  float:left;
  cursor:move;
}
input#note-name
{
  width:calc(100% - 4px);
  background-color:rgba(0, 168, 255, 0.25);
  color:white;
}
input#note-name:focus
{
  background-color:rgba(0, 168, 255, 0.5);
}
textarea#note-text
{
  width:calc(100% - 6px);
  height:20em;
  background-color:rgba(0, 168, 255, 0.25);
  color:white;
  resize:none;
}
textarea#note-text:focus
{
  background-color:rgba(0, 168, 255, 0.5);
}

div#buttonBar
{
  position:fixed;
  width:34px;
  top:20px;

  z-index:2;

  padding:8px 4px 0px 4px;
  /*
  background-color:rgba(0, 168, 255, 0.4);
  */
  background-color:rgba(0, 0, 0, 0.8);
  border:rgba(0, 168, 255, 0.4) solid 1px;
}
div#buttonBar>input
{
  margin-left:auto;
  margin-right:auto;
  width:30px;
  height:30px;
  margin-bottom:8px;
  display:block;
}

div#stats
{
  position:fixed;
  width:auto;
  bottom:20px;

  z-index:2;

  padding:4px;
  background-color:rgba(0, 0, 0, 0.8);
  border:rgba(0, 168, 255, 0.4) solid 1px;
}


div#menu
{
  position:fixed;
  right:0px;
  height:100%;
  top:0px;
  background-color: #000000;
  z-index:1;
}
div#dragbar
{
  height:100%;
  width:4px;
  background-color:#006FAF;
  margin:0px;
  position:relative;
  float:left;
  cursor:ew-resize;
}
div#dragbar:hover
{
  background-color:#00BFFF;
}
div#menu>div#container
{
  overflow-y:auto;
  overflow-x:hidden;
  height:100%;
}
div#menu>div#container>div
{
  position:relative;
  margin:4px 4px 4px 8px;
}
div#menu>div#container>div:not(#notices)
{
  border:1px solid rgba(0, 181, 255, 0.8);
}
div#notices
{
  border:none;
}
div.notice
{
  border:1px solid rgba(0, 181, 255, 0.8);
  padding:2px;
  position:relative;
  min-height:24px;
}
div.notice>p.title
{
  margin:4px 0px;
}
div.notice>input[type=image]
{
  float:right;
  color:rgb(255, 152, 0);
  position:absolute;
  top:6px;
  right:8px;
  cursor:pointer;
  width:16px;
}

div#search
{
  padding:0px 4px 4px;
}

span#searchFieldWrap
{
  display:block;
  padding-right:4px;
}

input[type="text"]#searchField
{
  width:100%;
  height:12px;
  color:#FFFFFF;
  border:solid 1px rgba(0, 190, 255, 0.6);
  background-color:rgba(0, 190, 255, 0.2);
  outline:none;
}
input[type="text"]#searchField:focus
{
  border:solid 1px rgba(0, 190, 255, 0.9);
  background-color:rgba(0, 190, 255, 0.5);
}

input
{
  outline-style:none;
  box-shadow:none;
  border-color:transparent;
}
input:hover, input:active, input:focus
{
  outline-style:none;
  box-shadow:none;
  border-color:transparent;
}
input::-moz-focus-inner
{
  border:0;
}

input[type=image]
{
  text-align:center;
  width:28px;
  margin:0px 5px;
}
div#targetNotes
{
  text-align:center;
}
div#targetOptions
{
  text-align:center;
}
div#targetOptions>input[type=image]
{
  margin-top:0px;
  margin-bottom:0px;
  margin-left:calc(64px / 6px);
  margin-right:calc(64px / 6px);
}
input[type=button]
{
  border:solid 1px grey;
}
input[type=button].green
{
  background-color:#223e01;
}
input[type=button].red
{
  background-color:#3c0804;
}

p#routeStart,p#routeDestination
{
  font-weight:bold;
  margin-left:8px;
}

a
{
  color:#FFFFFF;
  margin:auto;
  text-align:center;
  cursor:pointer;
  text-decoration:underline
}

a.clear
{
  color:red;
}

a.block
{
  display:block;
}

span#route>p
{
  margin-left:8px;
}

.hide
{
  display:none;
}

.grab
{
  cursor:grab;
  cursor:-webkit-grab;
}
.grabbing
{
  cursor:grabbing;
  cursor:-webkit-grabbing;
}
.click
{
cursor:pointer;
}
.green
{
  color:#A1D490;
}
.red
{
  color:#f44336;
}

.noselect
{
  user-select: none;
}