body              { font: 10pt Arial,Helvetica,sans-serif; color: black; background-color: #f6f6f6; background-image: url(helps/back.gif); background-attachment: fixed; margin: 0; padding: 5px; }
table             { font: 10pt Arial,Helvetica,sans-serif; color: black; }
td                { text-align: left; }
b                 { font-size: 1.1em }
small             { font-size: .9em; }
h1                { font: italic bold  1.8em "Times New Roman",Arial,Helvetica,sans-serif; color: red; letter-spacing: 1.6pt; padding-right: 10px; margin: 10px; }
h2                { font:        bold  1.4em Arial,Helvetica,sans-serif; color: blue; }
h3                { font:        bold  1.2em Arial,Helvetica,sans-serif; color: blue; }
h4                { font:        bold  1.1em Arial,Helvetica,sans-serif; color: #009; margin: 0; }
h5                { font:        bold  1.1em Arial,Helvetica,sans-serif; color: black; margin: 0; }
h6                { font:        bold  1.0em Arial,Helvetica,sans-serif; margin: 0; }
p                 { font-size: 12pt; }

a                 { color: blue; text-decoration: underline; }
a:hover,
a:active,
a:focus           { color: white; background-color: blue; text-decoration: none; }

a.extern          { padding-left: 18px; background: url(helps/link-extern.gif) left no-repeat; white-space: nowrap; color: red; }
a.extern:hover,
a.extern:active,
a.extern:focus    { color: black; background-color: #ff0; text-decoration: none; }

a.img             { color: green; text-decoration: none; }
a.img:hover,
a.img:active,
a.img:focus       { color: black; background-color: white; text-decoration: none; }

#all              { max-width: 800px; margin: auto; text-align: center; }
.mittig           { margin: auto; }
.gr               { color: gray;  }
.rt               { color: red;  }
.bl               { color: blue;  }
.gb               { color: green;  }
.frei             { margin: 5px; }
.finger           { cursor: pointer; }

#punkte img       { width: 30px; }
.sws-ausg         { width: 2.5em; color: blue; background-color: white; border: 0; margin-left: 10px; cursor: default;
                    font: 2em Arial,Helvetica,sans-serif; text-align: center; }

#tastatur         { background-color: white; }
.maustastatur     { text-align: left; white-space: nowrap; background-color: white; }
.maustastatur button { font: 1em Verdana,Helvetica,sans-serif; color: #333; cursor: pointer; background-color: #ddd;
                    margin: 1px; padding: 2px 7px; height: 2em; min-width: 20px; border-color: #ddd; border-radius: 7px; }
button            { margin: 2px; color: #333; cursor: pointer; background-color: #ddd; font-size: 10pt; }
button.off        { color: #ccc; background-color: #fff; border: 2px solid #ddd; cursor: default; }
input             { margin: 2px; background-color: white; font-size: 10pt; }
select            { margin: 2px; background-color: white; font-size: 10pt; }

.ameise           { border: 3px dotted red; border-radius: 8px; max-width: 550px; margin: auto; padding: 10px; background-color: white; }
.ameise.bl        { border-color: blue; }
.ameise.gn        { border-color: green; }
#punkte .zr       { width: 12px; }

@media only screen and (min-width: 401px)
{
  um::before             { content: " \a"; white-space: pre; }
  umt::before            { content: "-\a"; white-space: pre; }
}

@media only screen and (max-width: 600px)
{
  img.alpha       { width: 90%; }
  .ameise         { margin: 10px; }
}

@media only screen and (max-width: 430px)
{
  img.image       { width: 90%; }
  .maustastatur   { padding-left: 0px !important; }
}

@media only screen and (max-width: 420px)
{
  .maustastatur   { display: inline; white-space: normal !important; }
}

@media only screen and (max-width: 330px)
{
  #punkte .zr     { width: 5px; }
  #ausgabe        { width: 30px; text-align: center; padding: 0; margin: 0; }
}