.button {
height:20px;
width:40px;
border:1px solid black; background-color: gray;
}

input[type="text"] {
  display: inline;
  margin: 0;

  padding: 2px;
 // visibility: hidden;
  font-size: 12px;
  appearance: none;
  box-shadow: none;
  border-radius: 20;
  background: white;
  text-align: center; 
  border:1px solid gray;
}
input[type="text"]:focus {
  outline: none;
}

.hid {visibility:hidden}

.flags 
{
padding: 10px;
background: #e2e7d2;; 
border: 1px solid gray;
}

a.flags:link, a.flags:visited 
{
background: #e2e7d2;;
}

a.flags:hover 
{
border-color: #e2e7d2;; 
background: #e2e7d2;;
}

img
{
border: 1px solid black;
}






.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#content {
  display: table-cell;
  vertical-align: middle;
}

#grouped, #factored,#result,  #transliterated
{
position:relative;left:-18px;                        /* h... wie, dlaczego to musiałem sztucznie przesunąć? */
}