A, BODY, DIV, DD, DL, DT, P, TR, TD, LI, UL, 
H1, H2, H3, H4, H5, H6, BUTTON, INPUT { font-family: Verdana, sans-serif; }

FIGURE, FIGCAPTION { font-family: Arial, Helvetica, sans-serif; }

BODY
   {
   color: black;
   background-color: #FFFFC0;
   max-width: 90em; /* 1440px / 16pt */
   }
H1, H2, H3 { text-align: left; line-height: 1.0em; }
H1 { font-size: x-large; }
H2
   {
   font-size: medium;
   padding-top: 1.0em;
   }

INPUT, TD { font-size: medium; }

DIV, DD, DL, DT, P, TR, TD, LI, UL
   {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   -o-hyphens: auto;
   hyphens: auto;
   }  /* Silbentrennung, geht noch bei wenigen Browsern. "webkit: Safari, Chrome" */

IMG { margin: 0 0.375em; } /* 6px / 16pt */  /* oben/unten, links/rechts */

ABBR.dtstart, ABBR.dtend { border: none; }

P, DD, DL, DT, LI, UL { line-height: 1.4em; }

DT { font-style: italic; }

ARTICLE { padding-top: 0.5em; }

/*
A:link { color: blue; }
A:visited { color: purple; }
*/
A:link, A:visited { color: #C5000C; }
/* A:link, A:visited { color: #CC2222; } */
A:hover, A:active { color: red; }

BUTTON
   {
/*   font-size: 1em; */
   font-size: medium;
   font-weight: bold;
   border-color: darkgrey;
   background-color: lightgrey;
   border-radius: 0.5em;
   padding: 0.2em 0.65em; /* oben/unten, links/rechts */
   }
.button_small
   {
   font-size: smaller;
   font-weight: normal;
   border-color: darkgrey;
   background-color: lightgrey;
   border-radius: 0.5em;
   padding: 0em 0.35em; /* oben/unten, links/rechts */
   margin-right: 0.8em;
   }


FIGURE
   {
   float: right;
   max-width: 100%;
   margin: 0 0 0 1em; /* oben, rechts, unten, links */
   padding: 0.5em 0.5em 0.1em 0.5em; /* oben, rechts, unten, links */
   text-align: center; /* Hier definieren, sonst wird in manchen Browsern FIGCAPTION als Ganzes linksbündig plaziert */
/*   font-style: italic; */
/*   font-size: smaller; */
/*   font-size: 0.8em; */
/*   font-size: 0.9em; */
   background: #FFFFF0; /* ivory: #FFFFF0; */
   border-radius: 0.5em;
   }

@media only screen and (max-width: 40em) /* 640px / 16pt */
   {
   FIGURE
      {
      background: none;
      }
   FIGCAPTION
      {
      display: none;
      }
   }

#InfoFrame, #SelectionFrame, #TrainingFrame, #StatisticsFrame
   {
   padding-top: 2em;
   }

#NavFrame
   {
   position: absolute;
   top: 0em; left: 0em;
   height: auto;
   width: 100%;
   background-color: #D2B48C; /* RGB: 210, 180, 140 */
   background-image: url( ../images/NavBackground.trainer.gif );
   background-position: right center;
   }
@media only screen and (min-width: 480px) and (min-height: 480px)
{
html>body #NavFrame
   {  /* nur fuer moderne Browser! */
   position: fixed;
   }
}

A.navigation  {
   padding: 0.5em 1.25em 1.1em 1.25em; /* oben, rechts, unten, links */
   /* padding-bottom: 1.1em; alt: 1.25em */
   margin-left: 0.35em;
   background: #FFFFF0; /* wird in qptf.js gesetzt! */
   text-decoration: none;
   border-radius: 0.5em 0.5em 0 0; /* obenlinks, obenrechts, untenrechts, untenlinks */
   }
A.navigation:link, A.navigation:visited { color: black; }
A.navigation:active { background: #FFFFC0; } /* wird in qptf.js gesetzt! */

#selected A.navigation
   {
   font-weight: bold;
   background: #FFFFC0; /* wird in qptf.js gesetzt! */
   }


#InfoFrame
   {
   margin-top: 2.5em; /* 55px */
   }

.logo_text
   {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 800;
   color: #C5000C;
//   color: red;
   letter-spacing:0.05em;
//   letter-spacing:0.1em;
//   text-shadow: 0.06em 0.06em #C5000C;
//   text-shadow: 0.06em 0.06em black;
   text-decoration: none;
   font-size:1.1em;
//   vertical-align: top;
   }

.image_flex_portrait
   {
   max-width: 100%;
   }

img.image_flex_portrait
   {
   background-color: #FFFFC0;
   border-radius: 0.5em;
   }

.image_flex
   {
   max-width: 100%;
   border-radius: 0.5em;
   }

.image_flex_block
   {
   max-width: 99%;
   border-radius: 0.5em;
   }

.infobox
   {
   padding: 0.5em 1em;
   border: 2px solid #794923;
   border-radius: 0.5em;
   background: #FF9900;
   text-align: center;
   }

.timeshift
   {
//   font-style: italic;
   background-color: #FF9900;
   padding: 0 0.5em;
   border-radius: 0.5em;
   }

.readmore_link
   {
   display: none;
   }

.readless_link
   {
   display: none;
   }

.group
   {
   background-color: #FFFFF0;
   }
.disabled
   {
   color: grey;
   }
.hidden
   {
   visibility: hidden;
   }


@media only screen and (max-width: 50em) /* 800px / 16pt */
{
.readmore_link
   {
   display: inline;
   }
.readmore
   {
   display: none;
   }
.readless_link
   {
   display: none;
   }
H2
   {
   padding-top: 0.2em;
   }
}