/* Styles for use with Wortwal public interfaces. */

body  {
  font-family: sans-serif;
  font-size: 10pt;

  background-color: rgb(255,140, 0);
  color: rgb(40,40,40);
  
  padding: 7px 20px 0cm 20px;
}

label {
  font-size:smaller;
  color:rgb(240,240,240); background-color:inherit;
}

/* Logo etc. */

#notexist-logo {
  position:absolute;
  top:30px;left:20px
  }

/* could be overriden in #head-stuff img. */
#logo {
  padding-top:20px; padding-bottom: 17px;
}
#keypad {
  position:absolute;
  top:200px;right:20px;
}

#head-stuff table {
  margin-left:auto; margin-right:auto;
  border-collapse: collapse;
  table-layout: fixed;
  empty-cells: show;
}

#head-stuff {
  font-family: serif;
  font-style: oblique;
  font-size:x-large;
  overflow: hidden;
}

#head-stuff a img {
  border: 0px none;
}

#head-stuff td.frame {
  background-color: rgb(208,0,0);
  color: inherit;
/*  border: solid rgb(40,40,40) 1px; */
  font-size: 4px; /* small enough */
  width: 12px; max-width: 12px;
  height: 12px; max-height: 12px;
  padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}

a.arrow,
 a.arrow:active,
 a.arrow:visited,
 a.arrow:hover,
 a.arrow:active,
a.arrow:focus {
  font-style: normal;
  text-decoration: none;
  color: rgb(40,40,40); /* inherit: IE erbt von was anderem... */
}

 #navi a.arrow,
  #navi a.arrow:active,
  #navi a.arrow:visited,
  #navi a.arrow:hover,
  #navi a.arrow:active,
  #navi a.arrow:focus
{
  font-style: normal;
  text-decoration: none;
/*  color: rgb(40,40,40); */ /* inherit: IE erbt von was anderem... */
}

/* Google AdSense */

div#ad {
  position:absolute;
  top:200px;left: 25px;
  width:120px;
  overflow:hidden;
  
  background-color:rgb(255,140, 0);
  color:inherit;

  font-size: 11px
}

/* Google: <a class="adt" ...> */
#ad  a {
  background-color:inherit;
  color: #d40000; /* see logo.svg */
  text-decoration:underline;
}

#ad  table {
  /* background-color:rgb(240,240,240); */
  /* color: inherit; */
  width:120px;
}

/* Google: <span class="adus" ...> */
#ad  span.adus {
  font-size:x-small;
  background-color:inherit;
  color:rgb(240,240,240);
}


h1 {
  font-family: "Arial Black", sans-serif;

  font-size:xx-large;
  font-style: oblique; 
  text-align:center;
  
  padding: 20pt 0pt 12pt 0pt;
   color: rgb(40,40,40);
   background-color:inherit;
}

h1 .mini {
   font-size: smaller; /* font-weight: normal; */
   color: rgb(208,0,0); background-color: inherit;
}
.mini, .beta {
   font-size: smaller; /* font-weight: normal; */
   color: rgb(208,0,0); background-color: inherit;
}
code {
  color: rgb(240,240,240);
   background-color:inherit;
}

#main {
  padding-left: 160px;
  padding-right: 160px;
}

#main img {
/*  border-left: solid rgb(140,140,140) 2px; */
/*  border-right: solid rgb(140,140,140) 2px; */
  border-left: solid rgb(168,168,168);
  border-right: solid rgb(168,168,168);
}

span.input-number {
   color: rgb(208,0,0); background-color:inherit;
}

p.suggest {
  margin-top: 14pt;
}

table.suggest {
  border-collapse:collapse;
  margin-top: 30pt;
}

table.suggest td {
  padding: 0px; margin:0px;
  border: solid black 1px;
  border-spacing:0px;
  font-size:1px; 
}

p.suggest span {
  display: inline-block;
  text-align: center;
  width: 20pt;  height: 20pt;
  border: thin solid white;
  font-weight: bold; font-size: x-large;
  background-color: rgb(240,240,240); color: rgb(40,40,40);
}

/* Ziffern */
p.suggest span.d {
/*  display: inline-block;
  text-align: center;
  width: 20pt;  height: 20pt;
  border: thin solid white;
  font-weight: bold; font-size: x-large; */
  background-color: rgb(240,240,240); color: rgb(208,0,0);
}


/* Separatoren */
p.suggest span.s {
/*  display: inline-block; */
/*  text-align: center; */
  width: 1ex;  height: 20pt;
/*  border: thin solid white; */
  font-weight: normal;
  background-color: rgb(240,240,240); color: white;
}

p {
  text-align: justify;
}

.detail {
  font-size:smaller;
}

form  table {
  margin-left:auto; margin-right:auto; /* IE5 loses */
  margin-top:1cm
}

input[type=text] {
  background-color:rgb(240,240,240);
  color: inherit;
  
  /* font-weight:bolder; */
  
  width: 12pc; padding-right: 2px;
  direction:rtl;
  
}

input[type=submit] {
/*  background-color: rgb(0,140,255);
  color: rgb(215,215,215) */
  width: 8pc;
  } 
  
/* Bibliographic stuff, about links */
div#about {
  font-size: x-small;
  color:rgb(240,240,240);
  background-color:inherit;
  
  position:absolute;
  bottom:1px; right:20px;
}

#about  p {
 margin-left:auto; margin-right:0px; /* IE5 loses */
 text-align:center;
 position:relative;
 width:14em;
}

form a, #about a, #navi a {
  color:rgb(240,240,240); background-color:inherit;
  text-decoration:underline;
}

div#navi {
  position: absolute;
  right:20px;
  top: 400px;
}
/* increasingly misnamed. */
#navi p#navi-other-product, #navi .navi-other-product {
  margin-left: auto; margin-right: 0px;
 text-align:center;
 position:relative;
 width:140px;
}

#navi p#navi-other-product span.name, #navi .navi-other-product span.name {
 font-size: larger;
 font-style: oblique;
 font-weight: bold;
}

#navi .navi-other-product {
      background-color: rgb(40,40,40); color: rgb(240,240,240);
}

/* Multilinguagle Links mit Fähnchen:
   Bildmaße sind 44px hoch, 44px bzw 82 px breit. */

table#settings-lang {
  border-collapse: collapse;
}
table#settings-lang tr {
  width: 140px;
}
table#settings-lang td {
  vertical-align: middle;
  height: 52px;
  padding-left: 2px;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 0px; /* baseline ... */
}


/* Erlaeuterung */

p.hinweise {
    color:rgb(240,240,240); background-color:inherit;
}

/* Tipps. */
dt {
  color:rgb(240,240,240); background-color:inherit;
}
span[lang="en"] {
  font-style: italic;
}

.specific, .error-info {
  font-size: smaller;
}

table.error-info, table.error-info td {
  border: solid rgb(40,40,40) 2px;
  background-color: rgb(240,240,240); color: rgb(40,40,40);
  border-collapse: collapse;
  padding: 2px;
}