a:link{
  color:#000099;
}

a:visited{
  color:#7B82B0;
}

a:hover{
  color:#f00;
}

a:active{
  color:#F9A20E;
}


.dictionaryMainContainer{
  padding:20px; 
}

.greyText {
  color:grey;
}

.tdn {
  text-decoration:none;
}


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


h1 {
  font-size:12pt;
  font-weight:bold;

}

h2 {
  font-size:12pt;
  font-weight:normal;
}

img {
  vertical-align: middle;
}


.htpnormal {
  font-size:13px;
  font-weight:normal;
}


.linespacer {
  line-height: 2.0; /*usability: avoid that links come too close to each other*/
}


.minorText {
  color:#000066;
  font-size:smaller; 
}

.miniText {
  font-size:10px; 
}

.playButton {
   width:60px;
   height:60px;
   border-radius:10px;
   border:3px solid #000066;
   cursor:pointer;
   font-size:40px;
   color:#000066;
   text-decoration:none;
   box-shadow: 4px 4px 3px #888;
}

.playButton:hover{
   color:red;
   box-shadow: 2px 2px 5px #888;
}


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

.black150 , .black100 , .black80 , .black60 , .black40 {
  font-family: Georgia, "Times New Roman", "KaiTi", STKaiti, serif;
  color:#000000;
  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: 0px;
}


.superlargetext
{
  color:#000066;
  font-size:30px;
}


/* CSS mouseover */


span.mouseovertext span {
  /*Standardszenario: Box ist ausgeblendet*/
  color: black;
  /*width: 480px;*/
  position: absolute; 
  left: -9999px; /*dort wo man es nicht sieht*/
  /*margin: 4px 0 0 0px;*/
  padding: 3px 3px 3px 3px; 
  border-style:solid;
  border-color:black;
  border-width:1px;
  z-index:99;
  opacity: 0;
}


span.tooltip-examplesentence:hover span {
  position: absolute; /*fixed erscheint im Vordergrund, absolute scrollt mit, relative oder static bewirkt ein Aufklappen der Box*/
  left: 1%; 
  top: 0px; 
  width: 198%; /* leider kann man ihn nicht dazu bringen das rechte Feld zu überlappen*/
  background: #ffffff;  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255);
  overflow: visible;
  z-index:99;
  font-size:10pt;
  opacity: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition   : opacity 0.4s ease;
} 

span.tooltip-meaning:hover span {
  position: absolute; /*fixed erscheint im Vordergrund, absolute scrollt mit, relative oder static bewirkt ein Aufklappen der Box*/
  left: -99%; 
  top: 0px; 
  width: 198%;
  background: #ffffff; /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255); 
  overflow: visible;
  z-index:99;
  font-size:10pt;
  opacity: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition   : opacity 0.4s ease;
} 

span.tooltip-strokeorder:hover span {
  position: absolute; /*fixed erscheint im Vordergrund, absolute scrollt mit, relative oder static bewirkt ein Aufklappen der Box*/
  left: 5%; 
  top: 40px; 
  width: 90%;
  background: #ffffff; 
  overflow: visible;
  z-index:99;
  opacity: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition   : opacity 0.4s ease;
} 



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

.visible-row, .invisible-row, .small-row
{
    position: relative;
    width: 100%; 
    margin: 0px auto;
    overflow: hidden;
}



.small-row
{
    width: 50%; 
    max-width: 800px; 
    min-width: 310px;
}


.visible-row
{
    border-bottom: 2px solid #000066;
    min-height:50px;
}


.invisible-row
{
    border: 0px solid black; 
    min-height:80px;
}



.doublecell
{
    width: 98%; 
    border: 0px solid black;
    text-align: center;
    padding: 0.9%;
}


.floatLeft {
    float:left;
}


.word-left, .word-right, .doublecell {
    min-width:310px;
    position: relative;
}

.word-left {
    width:48%; 
    padding: 0.8%;
}

.word-right {
    width:48%; 
    background: none repeat scroll 0 0;
    float: left;
    padding: 2% 1% 2% 1%;
    border-left: 1px solid #000066;
}

.ad-left {
    padding-top:20px;
    border: 0px;
}


.ad-right {
    border: 0px;
    text-align: center;
    padding-top:20px;
}




.pronunciation-left {
    width:20%; 
    max-width: 100px;
    min-width: 50px;
    min-height: 65px;
    text-align: left;
    padding-top:10px;
    padding-left:3px;
    
}

.pronunciation-right {
    width:79%; 
    float: left;
    padding-top:10px;
    height: 100%;
}



.header-left {
    width:15%; 
    min-width: 110px;
    text-align: center;
    border: 0px solid blue;
}

.header-row {
    border: 0px solid green;
    min-height: 90px; /*verhindert dass das untere Flaggenpaar abgeschnitten wird */
}

.header-center {
    width:69%; 
    min-width: 300px;
    text-align: center;
    float: left;
    border: 0px dotted black;
}

.header-right {
    position:relative;
    right: 0px;
    min-width: 180px;
    text-align: left;
    float: left;
    border: 0px solid red;
}



.wordnav-left, .wordnav-right, .footer-left, .footer-right {
    width:49%; 
    padding: 0.4%;
    padding-top: 4px; /*erforderlich für mobile Version*/
    min-height: 60px; /*erforderlich für mobile Version*/
}


.wordnav-left {
    text-align: right;
}

.wordnav-right {
    position: absolute;
    float: left;
    height: 100%;
    left: 49.8%; /*Abstand vom linken Rand des Containerelements */
    text-align: left;
}

.footer-left, .footer-right {
  text-align: center;
}


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


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


a.linkButtonPrev {
  right: 25%;
}

a.linkButtonNext {
  left: 25%;
}

a.linkButton:hover {
  color: red;
  box-shadow: 2px 2px 5px #888;
}

.halfline {
  line-height: 100%;
}


/* =====  Mobile devices with narrow screens and / or narrow browser windows==== */
/* =====  690px or more allow for 2 columns==== */
@media only screen and (max-device-width: 690px), only screen and (max-width: 690px) {

  .miniText {
    font-size:13px; /* make linked text big enough to tap - 12 is too small*/
  }


  .dictionaryMainContainer{
    padding:0px; /* use all available screen space */
  }

  .outerTableBorder
  {
    border:2px solid #000066;
  }


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

  } 
  
  span.tooltip-examplesentence:hover span {
    left: 0%; 
    top: 0px; 
    width: 98%; /* leider kann man ihn nicht dazu bringen das rechte Feld zu überlappen*/
  } 
  
   .header-right {
    width:99%; 
    position: relative;
    text-align: center;
    float: left;
    height: 44px;
    border: 0px solid grey;
  }

  .playButton {
     width:40px;
     height:40px;
     border-radius:8px;
     border:2px solid #000066;
     font-size:20px;
     box-shadow: 4px 4px 3px #888;
    }
  
  
  .hideOnMobile {
    visibility: hidden;
    font-size: 0px;
    display: none; /*nur damit verschwinden auch Bilder*/
  }
  
  
  .showOnMobileOnly {
    visibility: visible;
    font-size: 12px;
  }

  
  .centerHorz {
    text-align: center;
  }

  .enlargeOnMobile {
    font-size: 20px;
  }
  
  .word-left {
    width: 99%;
  }
  
  .word-right {
    width: 99%;
    max-height: 350px; /*Schriftzeichen mit Kommentarzeile darunter, aber keine Strichreihenfolge-Animation mehr*/
    border-left: 0px solid #000066;
    border-top:1px dotted grey;
  }
  
  
  .ad-right {
    border: 0px;
    padding-top:20px;
  }
  
  .flagContainer {
    display: inline-block; /*nötig damit sich text-align: center; des parent-Elements auf diese Elemente auswirkt*/
    vertical-align: top; /*sonst sind die oberen Ränder unterschiedlich hoch*/
    width: 22.0%;
    max-width: 120px; /*verhindert dasss die Texte unter den Flaggen daneben springen*/
    min-height: 26px; /*verhindert Darstellungsfehler auf Tolino*/
    text-align: center;
    border: 3px double #000066;
    border-radius: 8px;
    background-color: white;
  }
  
  .footer-left {
    text-align: center;
  }

  .footer-right {
    text-align: center;
  }
  
  a.linkButtonPrev {
    right: 0%;
  }

  a.linkButtonNext {
    left: 0%;
  }
  
  
 

}

@media only screen and (orientation: portrait) and (max-device-width: 690px) {
/* nur auf smartphone-portrait Überschrift in der Mitte in eigener Zeile anzeigen*/
/* (auf smartphone-landscape braucht man den vertikalen PLatz damit die AdSense-Anzeige above the fold erscheint*/
  .header-center {
    width:99%; 
    min-width: 200px;
    text-align: center;
    float: left;
  }
}


@media only screen and (orientation: landscape) and (max-device-width: 690px) {
/* auf smartphone-landscape braucht man den vertikalen PLatz damit die AdSense-Anzeige above the fold erscheint --> Buttons in die Breite wachsen lassen */
a.linkButtonPrev, a.linkButtonNext {
  font-size: 22px;
  padding-bottom:3px;
  padding-left:15px;
  padding-right:15px;
}


.halfline {
  line-height: 50%;
}
  


/* =====  relatively small browser window ==== */
@media only screen and (max-width: 1200px) and (min-width: 691px) {


/* avoid that language selector overlaps with headline*/
  .hideOnMobile {
    visibility: hidden;
    font-size: 0px;
  }
  
  .header-right {
    min-width: 80px;
    text-align: left;
    float: left;
  }

}