a:link    { color: #009; }
a:visited { color: #7b82b0; }
a:hover   { color: #f00; }
a:active  { color: #f9a20e; }

.dictionaryMainContainer { padding: 20px; }
.dimgrayText { color: dimgray; }

h1, h2, .htpnormal, .minorText, .miniText, .principalText {
  font-family: Arial, Helvetica, sans-serif;
}

h1, h2 { font-size: 12pt; }
h2 { font-weight: normal; }
img { vertical-align: middle; }

.htpnormal { font-size: 13px; font-weight: normal; }
.linespacer { line-height: 2; } /* Links nicht zu dicht untereinander */
.minorText { color: #006; font-size: smaller; }
.miniText { font-size: 10px; }

.principalText { color: #006; font-size: 12pt; font-weight: normal; }

.black150, .black100, .black80, .black60, .black40 {
  font-family: Georgia, "Times New Roman", "KaiTi", STKaiti, serif;
  color: #000;
  font-weight: normal;
}
.black150 { font-size: 150pt; }
.black100 { font-size: 100pt; }
.black80  { font-size: 80pt; }
.black60  { font-size: 60pt; }
.black40  { font-size: 40pt; }

.showOnMobileOnly { visibility: hidden; font-size: 0; }


/* ===== CSS-Mouseover ===== */

/* Standard: Box ausgeblendet */
span.mouseovertext span {
  color: black;
  position: absolute;
  left: -9999px;
  padding: 3px;
  border: 1px solid black;
  z-index: 99;
  opacity: 0;
}

/* absolute scrollt mit, fixed bleibt im Vordergrund, relative/static klappt auf */
span.tooltip-examplesentence:hover span,
span.tooltip-meaning:hover span,
span.tooltip-strokeorder:hover span {
  position: absolute;
  top: 0;
  width: 198%;
  background: #fff;
  overflow: visible;
  z-index: 99;
  font-size: 10pt;
  opacity: 1;
  transition: opacity .4s ease;
}
span.tooltip-examplesentence:hover span { left: 1%; }
span.tooltip-meaning:hover span { left: -99%; }
span.tooltip-strokeorder:hover span { left: 5%; top: 40px; width: 90%; font-size: inherit; }


/* ===== Layout ===== */

.outerTableBorder { border: 2px solid #006; min-height: 1000px; }

.visible-row, .invisible-row, .small-row {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.small-row { width: 50%; max-width: 800px; min-width: 310px; }
.visible-row { border-bottom: 2px solid #006; min-height: 50px; }
.invisible-row { min-height: 80px; }

.word-left, .word-right, .doublecell { min-width: 310px; position: relative; }
.doublecell { width: 98%; text-align: center; padding: .9%; }

.floatLeft { float: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.nobreaks { white-space: nowrap; }

.word-left { width: 48%; padding: .8%; }
.word-right {
  width: 48%;
  float: left;
  padding: 2% 1%;
  border-left: 1px solid #006;
}

.ad-left, .ad-right { padding-top: 20px; }
.ad-right { text-align: center; }

.header-row { min-height: 90px; } /* sonst wird das untere Flaggenpaar abgeschnitten */
.header-left { width: 15%; min-width: 110px; text-align: center; }
.header-center { width: 69%; min-width: 300px; text-align: center; float: left; }
.header-right { position: relative; right: 0; min-width: 180px; text-align: left; float: left; }

.wordnav-left, .wordnav-right, .footer-box {
  width: 49%;
  padding: 4px .4% .4%;  /* padding-top 4px für Mobilversion */
  min-height: 60px;      /* für Mobilversion */
  white-space: nowrap;
}
.wordnav-left { text-align: right; }
.wordnav-right {
  position: absolute;
  height: 100%;
  left: 49.8%; /* Abstand vom linken Rand des Containers */
  text-align: left;
}

.flagContainer { position: relative; min-height: 22px; }

a.linkButtonPrev, a.linkButtonNext {
  position: relative;
  border: 1px solid #006;
  border-radius: 10px;
  text-decoration: none;
  color: #006;
  font-size: 30px;
  font-weight: normal;
  padding-bottom: 5px;
  box-shadow: 4px 4px 3px #888;
}
a.linkButtonPrev { right: 25%; }
a.linkButtonNext { left: 25%; }
a.linkButtonPrev:hover, a.linkButtonNext:hover { color: red; box-shadow: 2px 2px 5px #888; }

.halfline { line-height: 100%; }


/* ===== Schmale Bildschirme/Fenster (ab 691px passen 2 Spalten) ===== */
@media only screen and (max-device-width: 690px), only screen and (max-width: 690px) {

  .miniText { font-size: 13px; } /* groß genug zum Antippen – 12px ist zu klein */
  .dictionaryMainContainer { padding: 0; } /* ganze Bildschirmbreite nutzen */

  span.tooltip-meaning:hover span { left: 0; top: -40px; width: 98%; }
  span.tooltip-examplesentence:hover span { left: 0; width: 98%; }

  .header-right { width: 99%; text-align: center; height: 44px; }

  .hideOnMobile { display: none; }

  .showOnMobileOnly {
    visibility: visible;
    font-size: 12px;
    display: inline-block;
    width: 50px;
    text-align: center;
  }

  .centerHorz { text-align: center; }
  .enlargeOnMobile { font-size: 20px; }

  .word-left { width: 99%; }
  .word-right {
    width: 99%;
    max-height: 350px; /* Schriftzeichen + Kommentarzeile, ohne Strichfolge-Animation */
    border-left: 0;
    border-top: 1px dotted dimgray;
  }

  .flagContainer {
    display: inline-block;  /* damit text-align:center des Elternelements wirkt */
    vertical-align: top;    /* sonst ungleich hohe obere Ränder */
    width: 22%;
    max-width: 120px;       /* verhindert, dass Texte unter den Flaggen daneben springen */
    min-height: 26px;       /* verhindert Darstellungsfehler auf Tolino */
    text-align: center;
    border: 3px double #006;
    border-radius: 8px;
    background-color: white;
  }

  a.linkButtonPrev { right: 0; }
  a.linkButtonNext { left: 0; }
}

/* Smartphone hochkant: Überschrift in eigener Zeile */
@media only screen and (orientation: portrait) and (max-device-width: 690px) {
  .header-center { width: 99%; min-width: 200px; }
}

/* Smartphone quer: vertikalen Platz sparen, damit die AdSense-Anzeige above the fold erscheint */
@media only screen and (orientation: landscape) and (max-device-width: 690px) {
  a.linkButtonPrev, a.linkButtonNext {
    font-size: 22px;
    padding: 0 15px 3px;
  }
  .halfline { line-height: 50%; }
}

/* ===== Mittelgroßes Browserfenster ===== */
@media only screen and (max-width: 1200px) and (min-width: 691px) {
  /* Sprachauswahl soll die Überschrift nicht überlappen */
  .hideOnMobile { visibility: hidden; font-size: 0; }
  .header-right { min-width: 80px; }
}