/****************************************************/
/*    System Menu style sheet for Split Recycler    */
/*         Copyright 2019-2020 by Cassida           */
/* Use only in accordance with the supplied license */
/*                                                  */
/*  Keep this style sheet SMALL.  Don't pollute!!!  */
/****************************************************/

/*
 This style sheet is for COMMON things.  Don't put
 stuff in here that only applies to a single page.
 These style don't change from page to page AND if
 the browser caches it, you shouldn't be affected
 by aggressive browser cacheing during development.
*/

@charset "UTF-8";

/* default font */
@font-face
{
 font-family: Lato;
 src: url(/fonts/lato-v15-latin-regular.woff);
}
html
{
  font-family: 'Lato';
  font-size: 20px;
}

/* default anchor styles */
a
{
  color: #F0F080; font-size:14px;
}
a:visited
{
  color: #F0C040; font-size:14px;
}
a:active
{
  color: #F8F800; font-size:14px;
}
a:hover
{
  color: #FFFFE0; font-size:14px;
}

body
{
  background-color:#101824;
  color:#ffffe0;
}
h2
{
  font-size: 20px;
}

/* default button text size, input elements */
button
{
 font-weight: bold;
 font-size: 18px;
 height : 30px;
}
input
{
  font-weight: bold;
}
input[type="submit"]
{
  height: 44px;
  font-size: 22px;
}
input[type="text"]
{
  height: 30px; font-size: 18px; vertical-align: middle;
}
input[type="checkbox" i]
{
 font-weight: bold;
 font-size: 22px;
 height : 28px;
 width : 24px; /* affects box size */
 vertical-align: middle;
}
textarea
{
  font-size: 18px;
}

/* classes - these are also in style.css now */
.narrow-font
{
  /* narrow-font class, wide things on Android */
  font-family: 'Roboto Condensed';
}

/* use this class to contain 'modal things' so I can disable clicking */
/* it is mostly transparent, should look really good */
.modal-container
{
  display: none;
  position: fixed;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);       /* this was in the example */
  background-color: rgba(0, 0, 0, 0.25); /* a very light shading */
  z-index: 99;
}

/* default popup shadow class */
.me-and-my-shadow /* can apply to a button on white background */
{
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .14), 0 6px 2px -2px rgba(0, 0, 0, .2), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
}
/* default popup highlight class */
.me-and-my-highlight /* can apply to a screen on dark green background */
{
  box-shadow: 0 4px 4px 0 rgba(0, 255, 0, .14), 0 6px 2px -2px rgba(0, 255, 0, .2), 0 2px 10px 0 rgba(0, 255, 0, .12) !important;
}
/* default 'medium modal' dialog box area */
.medium-modal /* this can become a standard; for now its just in the middle of the screen */
{
  position:relative;
  left: 150px;
  top: 75px;
  width: 500px;
  height: 200px;
  color: #000000;
  background-color: #fffff8; /* off-white for eye preservation */
  border-radius: 10px; /* rounded corners */
}
.keyboard-container
{
  position:absolute;
  left: 0px;
  bottom: 0px;
  width: 800px;
  height: 230px;
  color: #000000;
  background-color: #f8f8d8; /* off-white for eye preservation */
  border-radius: 10px; /* rounded corners */
}