@font-face {
  font-family: LOFont;
  src: url(DejaVuSansMono.ttf) format("truetype");
}

#vt100 a { 
  text-decoration:      none;
  color:                inherit;
}

#vt100 a:hover { 
  text-decoration:      underline;
}

#vt100 #reconnect {
  position:             absolute;
  z-index:              2;
}

#vt100 #reconnect input { 
  padding:              1ex;
  font-weight:          bold;
  font-size:            x-large;
}

#input {
  autocapitalize: false;
  autocorrect: false;
  autocomplete: false;
}



#vt100 #cursize {
  background:           #EEEEEE;
  border:               1px solid black;
  /* font-family:          sans-serif; */
  font-family: inherit;
  font-weight:          bold;
  font-size: small;
  padding:              1ex;
  position:             absolute;
  z-index:              2;
}

#vt100 pre { 
  margin:               0px;
}

#vt100 pre pre {
  overflow:             hidden;
}

#vt100 #scrollable {
  overflow-x:           hidden;
  overflow-y:           scroll;
  position:             relative;
  padding:              1px;
}

.scalefont {
  /* font-size: 1.75vw; */
}

body, #vt100 #console, #vt100 #alt_console, #vt100 #cursor, #vt100 #lineheight, #imebox, #vt100 .hidden pre { 
  font-family:          LOFont, monospace;
  font-size: initial; /* so there is a fallback in case vw doesn't work right. */
}

#vt100 #lineheight { 
  position:             absolute;
  visibility:           hidden;
}

#vt100 #cursor {
  position:             absolute;
  left:                 0px;
  top:                  0px;
  overflow:             hidden;
  z-index:              1;
}

#vt100 #cursor.bright {
  background-color:     black;
  color:                white;
}

#vt100 #cursor.dim {
  visibility:           hidden;
}

#vt100 #cursor.inactive {
  visibility:           hidden;
  border:               1px solid;
  margin:               -1px;
}

#vt100 #padding { 
  visibility:           hidden;
  width:                1px;
  height:               0px;
  overflow:             hidden;
}

#vt100 .hidden {
  position:             absolute;
  top:                  -10000px;
  left:                 -10000px;
  width:                0px;
  height:               0px;
}

#vt100 #menu { 
  overflow:             visible;
  position:             absolute;
  z-index:              3;
}

#vt100 #menu .popup {
  background-color:     #EEEEEE;
  border:               1px solid black;
  font-family:          sans-serif;
  font-size:            medium;
  position:             absolute;
}

#vt100 #menu .popup ul { 
  list-style-type:      none;
  padding:              0px;
  margin:               0px;
  min-width:            10em;
}

#vt100 #menu .popup li { 
  padding:              3px 0.5ex 3px 0.5ex;
}

#vt100 #menu .popup li.hover {
  background-color:     #444444;
  color:                white;
}

#vt100 #menu .popup li.disabled {
  color:                #AAAAAA;
}

#vt100 #menu .popup hr { 
  margin:               0.5ex 0px 0.5ex 0px;
}

#vt100 #menu img { 
  margin-right:         0.5ex;
  width:                1ex;
  height:               1ex;
}

#vt100 #scrollable.inverted { color:            #ffffff;
                              background-color: #000000; }

#vt100 #kbd_button { 
  float:                left;
  position:             fixed;
  z-index:              0;
  visibility:           hidden;
}

#vt100 #keyboard {
  z-index:              3;
  position:             absolute;
}

#vt100 #keyboard .box {
  font-family:          sans-serif;
  background-color:     #cccccc;
  padding:              .8em;
  float:                left;
  position:             absolute;
  border-radius:        10px;
  -moz-border-radius:   10px;
  box-shadow:           4px 4px 6px #222222;
  -webkit-box-shadow:   4px 4px 6px #222222;
  /* Don't set the -moz-box-shadow. It doesn't properly scale when CSS
   * transforms are in effect. Once Firefox supports box-shadow, it should
   * automatically do the right thing. Until then, leave shadows disabled
   * for Firefox.
   */
  opacity:              0.85;
  -moz-opacity:         0.85;
  filter:               alpha(opacity=85);
}

#vt100 #keyboard .box * {
  vertical-align:       top;
  display:              inline-block;
}

#vt100 #keyboard b, #vt100 #keyboard i, #vt100 #keyboard s, #vt100 #keyboard u {
  font-style:           normal;
  font-weight:          bold;
  border-radius:        5px;
  -moz-border-radius:   5px;
  background-color:     #555555;
  color:                #eeeeee;
  box-shadow:           2px 2px 3px #222222;
  -webkit-box-shadow:   2px 2px 3px #222222;
  padding:              4px;
  margin:               2px;
  height:               2ex;
  display:              inline-block;
  text-align:           center;
  text-decoration:      none;
}

#vt100 #keyboard b, #vt100 #keyboard s {
  width:                2ex;
}

#vt100 #keyboard u, #vt100 #keyboard s {
  visibility:           hidden;
}

#vt100 #keyboard .shifted { 
  display:              none;
}

#vt100 #keyboard .selected {
  color:                #888888;
  background-color:     #eeeeee;
  box-shadow:           0px 0px 3px #222222;
  -webkit-box-shadow:   0px 0px 3px #222222;
  position:             relative;
  top:                  1px;
  left:                 1px;
}

#dirbox {
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	margin: 1em;
	border-radius: 2mm;
	visibility: hidden;
}

#dirbox tr {
}

#dirbox td {
	border-radius: 2mm;
}

#dirbox td:hover{
	background: rgba(64,64,64,0.5);
}

#dirbox td:active{
	background: rgba(128,128,128,0.5);
}

#dirbox button {
}

#dirbox .ansi0               {                            }
#dirbox .ansi1               { fill:            #bd1c30; }
#dirbox .ansi2               { fill:            #1cbd30; }
#dirbox .ansi3               { fill:            #b4a543; }
#dirbox .ansi4               { fill:            #4e4ebd; }
#dirbox .ansi5               { fill:            #b4486a; }
#dirbox .ansi6               { fill:            #4e9a91; }
#dirbox .ansi7               { fill:            #e4e4e4; }
#dirbox .ansi8               { fill:            #FFFFFF; }
#dirbox .ansi9               { fill:            #f87487; }
#dirbox .ansi10              { fill:            #5cff71; }
#dirbox .ansi11              { fill:            #ffffb4; }
#dirbox .ansi12              { fill:            #4ea0e4; }
#dirbox .ansi13              { fill:            #f8bde4; }
#dirbox .ansi14              { fill:            #87e4e4; }
#dirbox .ansi15              { fill:            #FFFFFF; }
#dirbox .ghost               { fill:            #333333; opacity: 0.85; }

#imebox {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0.5em;
}

#imebox input, select, textarea {
	width: 100%;
	background-color: transparent;
	color: white;
	border-style: none;
	font-family: inherit;
	font-size: inherit;
}

/* IE cannot properly handle "inherit" properties. So, the monochrome.css/
 * color.css style sheets cannot work, if we define colors in styles.css.
 */

@media print {
  #vt100 .scrollback {
    display:            none;
  }

  #vt100 #reconnect, #vt100 #cursor, #vt100 #menu, #vt100 #kbd_button, #vt100 #keyboard { 
    visibility:         hidden;
  }

  #vt100 #scrollable { 
    overflow:           hidden;
  }

  #vt100 #console, #vt100 #alt_console { 
    overflow:           hidden;
    width:              1000000ex;
  }
}

.menu {
	/* text="#443311" bgcolor="#688F9E" link="#cc2600" vlink="#aa2600" alink="#ffb76c" */
	/* background: #FFFFFF; */
	/* border: solid #404040; */
	/* color: #443311; */
}

#menucontainer {
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}

.menu button {
	background: inherit;
	border: inherit;
	color: inherit;
	display: block;
	width: 100%;
}


.menubar {
	top: 1em;
	right: 1em;
	float: right;
	clear: none;
	/* width: 100%; */
	overflow: visible;
	position: fixed;
	z-index: 10;
	visibility: hidden;
}

.menubar button {
	display: inline;
	width: initial;
	padding: 1em;
}


.menuside {
	float: right;
	clear: none;
	min-width: 30mm;
	/* height: 100%; */
	border-width: 4px;
	position: fixed;
	display: block;
	visibility: hidden;
	right: -20%;
	transition: all 0.15s ease-in-out;
	z-index: 10;
	bottom: 0;
	font-size: initial;
}

.menuside button {
	display: block;
	width: 100%;
	margin: 1em auto;
	border-width: 1px 0px 1px 0px;
	padding: 1em;
	margin: 0em;
}

.menuside button:hover {
	color: #ffb76c;
}

.menuside table {
	width: 100%;
}

.menuside tr {
	margin: 2.0mm;
}

.menuside td {
	color:	white;
	background: rgba(64,64,64,0.5);
	border-radius: 2.0mm;
	min-height:	6.0mm;
	padding: 2.0mm;
}

.menuside td:hover{
	background: rgba(64,64,64,0.75);
}

.menuside td:active{
	background: rgba(64,64,64,1.0);
}

.menuside .open {
	color: white;
}

.menuside .send {
	font-weight: bold;
	color: yellow;
}

.icon {
	display: inline-block;
	margin: 2.0mm;
	width: 6.0mm;
	height: 6.0mm;
	fill: white;
}


#blahloginbox {
	background: rgba(64,64,64,0.5);
	position: absolute;
	margin: 1em;
	padding: 1em;
	border-color: grey;
	border-radius: 2mm;
	visibility: hidden;
	transition: all 0.15s ease-in-out;
}