* {
  padding: 0;
  margin: 0;
  border: none;
  }


body  {
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
  font-size: 14px; /* NEU normale standardschrift UND de-en-schrift in header UND menueschrift urspr 13px */
  background: url(cssblau/bodyhint.png) repeat-x fixed #A6C7F9;  /*Hintergrundbild des bodys, falls bild nicht vorhanden dann hintergrundfarbe */
  margin-top: 0;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 5px;
  }


/* gesamt ist rahmen + styleswitch */
#gesamt { 
  width: 900px; /* NEU urspr830px - diese width muss genauso breit sein wie die width von rahmen und die "border x2" von rahmen zusammen */
  margin: 0 auto 0 auto; /* AUTO bedeutet hier wohl dass GESAMT mittig im browser dargestellt wird */
}


/* in STYLESWITCH ist der styleswitcher untergebracht */
#styleswitch {
  height: 14px;
  text-align: right;
  }

/* rahmen ist der UMRANDETE grossbereich */
#rahmen { 
  width: 900px; /* NEU urspr 830px */
  /* background-color: #E8F2FF; */
  background: url(cssblau/untermenuehint.png) repeat-x #E8F2FF;  /*Hintergrundbild des bodys, falls bild nicht vorhanden dann hintergrundfarbe */
  border: 0 hidden black; /*diese "border x2" und die width von rahmen müssen zusammen genauso breit sein wie die width von gesamt */
  }


/* das ist der HEADER mit lang-select und den blumen als hintergrund*/
#header { 
  height: 130px; /* NEU urspr 120px */
  background-image: url(cssblau/headerhint.jpg);
  } 

#homeklick {
  float: left;
  width: 750px;
  }

#flaggen {
  float: right;
  width: 66px; /* NEU urspr 60px */
  height: 18px; /* Die Länge dieser ID muss mit der Länge der Sprachenflagge identisch sein */
  margin: 63px 10px 0 10px; /* NEU urspr oben 60px - abstaende nach oben rechts unten links */
  }

/* in MENU ist das MENÜ */
#menu {
  height: 45px;              /*  diese px + die padding-px ergeben die geamthöhe des MENU-DIV */
  background-image: url(cssblau/menuhint.gif); /*  da bei einem 100%-browserzoom ".aussenrechts" (siehe kommentar bei diesem) nur 2px breit ist und somit die menuezeile nicht ganz ausfällt ist im übrigen platz (also rechts in der menueleiste) dieses (gleiche) hintergrundbild zu sehen */
  padding: 0 0 0 0;        /* in den ersten 5 pixel von oben ist im MENU-DIV kein inhalt vorhanden */
  }


/* der eigentliche INHALT */
#inhalt { 
  margin: 50px 105px 16px 105px; /* etwas space von allen seiten nach oben(menue) rechts unten(footer) links */
  } 


/* in der FUSSZEILE sind unsere kontaktdaten untergebracht */
#fusszeile {
  color: #FFFFFF;
  text-align: center;
  font-size: 13px; /* NEU fusszeilenschrift urspr 12px */
  height: 70px; /* NEU urspr 66px - "height" + "padding" = Höhe der Fusszeile */
  background-image: url(cssblau/footerhint.png);
  padding: 80px 0 0 0;        /* NEU urspr 84px - in den ersten 80 pixel von oben(inhalt) ist im FUSSZEILE-DIV kein inhalt vorhanden */
}


/* im kontaktbereich gibt es fuer unsere emailadresse spezielle spamschutzregeln */
#kontaktemail::after, span#mailanzeigen::after {
background-color:#E8F2FF; color:#000000;}
span#mailanzeigen::after {content: "mail\40gaestehaus-gundling.de";}


/* MENÜKONFIGURATION */
#menu {
  clear: both; /* ?? */
  }

#menu ul { /* OK */
  text-align : center; /* die schrift der einzelnen menüpunkte sind jeweils in ihrem bereich zentriert*/
  }

#menu li { /* OK */
  list-style: none; /* Deaktivierung des aufzählungspunktes vor den einzelnen menüpunkten */
  display: inline;  /* die einzelnen menüpunkte sollen waagerecht nebeneinander aufgelistet werden */
  }

#menu a, #menu span { /* OK */
  float: left; /* die menuepunkte werden von links mit "home" bis rechts mit "anreise" aufgeführt */
  line-height: 45px; /*höhe der menüpunkte OHNE die rahmenlinie */
  border: 1px solid #E8F2FF; /* der rand der um die einzelnen menüpunkte und "aussenlinks" und "aussenrechts" geht */
  border-left: 0; /* ABER an den linken seiten der einzelnen menüpunkte soll kein rand sein */
  border-top: 0; /* UND an den oberen seiten der einzelnen menüpunkte soll auch kein rand sein */
  border-bottom: 0; /* UND an den unteren seiten der einzelnen menüpunkte soll auch kein rand sein */
  text-decoration: none; /* der text im menübereich ist nicht unter- durch oder überstrichen */
 }

.aussenlinks {
  width: 13px; /* NEU urspr 12px */
  }

.kurz {
  min-width: 77px; /* NEU urspr 71px */
  }
  
.mittelkurz {
  min-width: 101px; /* NEU urspr 93px */
  }

.mittel {
  min-width: 119px; /* NEU urspr 109px */
  }

.lang {
  min-width: 160px; /* NEU urspr 148px */
  }
  
.sehrlang {
  min-width: 196px; /* NEU urspr 180px */
  }

.aussenrechts {
  width: 2px; /* eigentlich muesste hier 12px eingetragen werden damit die menuezeile zu 100% ausgefuellt ist, da es aber bei vor allem einem browserzoom von kleiner als 100% die brwserzeile durch zoomungenauigkeiten nicht ausreicht, habe ich hier nur 2px als Wert eingetragen und beim div-menue den nicht-hover-menue-button als hintergrund eingestellt */
  }

#sel { /* OK */
  color: #ffffff; /* Textfarbe des aktuellen Menüpunktes */
  background: url(cssblau/menuhint.gif) repeat-x #E8F2FF; /*Hintergrundbild des aktuellen Menüpunktes, falls bild nicht vorhanden dann hintergrundfarbe */
  font-weight: bold; /* der text des aktuellen Menüpunktes soll "bold" oder "normal" sein */
  }

.kurz, .mittelkurz, .mittel, .lang, .sehrlang, .aussenlinks, .aussenrechts { /* OK */
  color: #FFFFFF; /*Textfarbe der nicht aktuellen Menüpunkte */
  background: url(cssblau/menuhint.gif) repeat-x #E8F2FF; /*Hintergrundbild der nicht aktuellen Menüpunkte, falls bild nicht vorhanden dann hintergrundfarbe */
  }
  
#menu a:hover { /* OK */
  background: url(cssblau/menuhinthover.gif) repeat-x #5878D4; /*Hintergrundbild des Menüpunktes auf den die maus zeigt (keine auswirkung auf akt. Menüpunkt), falls bild nicht vorhanden dann hint.farbe */
  }
  
  
  
/* Überschriften */


h1 {
  color: #3858C5;
  font-size: 20px; /* NEU schrift der ueberschriften auf hoechster ebene urspr 19px */
  font-weight: normal;
  padding: 0 0 2px 0; /* abstaende nach oben rechts unten links */
  }

h2 {
  color: #3858C5;
  font-size: 17px; /* NEU schrift der ueberschriften auf zweithoechster ebene urspr 16px */
  font-weight: normal;
  padding: 18px 0 18px 0; /* abstaende nach oben rechts unten links */
  }

h3 {
  color: #FF0000;
  font-size: 17px; /* NEU schrift der coronaueberschrift auf home urspr 16px */
  font-weight: normal;
  padding: 40px 0 12px 0; /* abstaende nach oben rechts unten links */
  }

.fehlerimformmailer { /* das sind die fehlermeldungen im formmailer UND die aussage bei den sights dass nur deutsche sprache verfuegbar ist */
  color: #FF0000;
  font-size: 15px; /* NEU schrift der fehlermeldungen bei falsch ausgefuelltem formmailer urspr 14px */
  font-weight: bold;
  }

.bestformmailer { /* das ist die bestaetigungsmeldungueberschrift im formmailer nach erfolgreichem versand */
  color: #008000;
  font-size: 15px; /* NEU schrift der bestaetigung bei richtig ausgefuelltem formmailer urspr 14px */
  font-weight: bold;
  }

/* Links */

a:link.textlink {
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
  color: #000000;
  text-decoration: underline;
  }

a:visited.textlink {
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
  color: #000000;
  text-decoration: underline;
  }

a:hover.textlink {
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
  color: #000000;
  text-decoration: underline;
  }


/* Home */

div.tablehome {
  display: table;
  width: 690px;
  }

div.trhome {
  display: table-row;
  }

div.tdhome {
  display: table-cell;
  border: none;
  padding: 14px 0 0 0; /* Oberhalb der Zelle ist 14px platz */
  vertical-align: middle;
  }

/* Zimmer - Haus - Freizeitangebote-Startseite */

div.tablezimhaus {
  display: table;
  width: 690px;
  }

div.trzimhaus {
  display: table-row;
  }

div.tdzimhausun {
  display: table-cell;
  border: none;
  padding: 10px 10px 10px 10px;
  vertical-align: middle;
  }

div.tdzimhausfarb {
  display: table-cell;
  border: none;
  padding: 10px 10px 10px 10px;
  vertical-align: middle;
  background: url(cssblau/cellback.png) repeat-x #8FB7F8; /* Hintergrundbild von "Cellback-Zellen", falls bild nicht vorhanden dann hint.farbe */
  }

img.bigpic {
  border: 10px solid #6688E3; /* Um die großen Zimmer- und Hausbilder soll ein Rahmen sein (das galt bis ggvers11 auch für das große Home-Bild) */
  }


/* Preise */

div.tablepreis {
  display: table;
  width: 690px;
  }

div.trpreis {
  display: table-row;
  }

#einzelpreistdback {
  background-color: #DDECFF;
  }

#doppelpreistdback {
  background-color: #CCE4FF;
  }

#dreibettpreistdback {
  background-color: #C1DFFF;
  }

div.tdbeschreibung {		/* Die Tabellenspalte in der das zimmer beschrieben ist */
  text-align: left;			/* Der Text soll in der Zelle horizontal-linksbuendig dargestellt werden */
  display: table-cell;
  border: none;
  padding: 0 0 0 18px; /* der text hat 0px nach oben und 0px nach rechts und 0px nach unten und 18px nach links Platz */
  vertical-align: middle; /* Der Text soll in der Zelle vertical-zentriert dargestellt werden */
  width: 211px; /* NEU urspr 190px - Breite dieser Spalte" */
  line-height: 18px; /* Zeilenabstand */
  height: 90px; /* Höhe dieser Zelle */
  }

div.tdvorwort {
  display: table-cell;
  border: none;
  vertical-align: middle;
  width: 34px; /* NEU urspr 30px - Breite dieser Spalte" */
  line-height: 18px; /* Zeilenabstand */
  height: 90px; /* Höhe dieser Zelle */
  }

div.tdzahl {
  display: table-cell;
  border: none;
  vertical-align: middle;
  width: 195px; /* NEU urspr 175px - Breite der dieser Spalte" */
  line-height: 18px; /* Zeilenabstand */
  height: 90px; /* Höhe dieser Zelle */
  }

div.tdeuro {
  display: table-cell;
  border: none;
  vertical-align: middle;
  width: 250px; /* NEU urspr 225px - Breite der dieser Spalte" */
  line-height: 18px; /* Zeilenabstand */
  height: 90px; /* Höhe dieser Zelle */
  }

#preisausstatt {
  margin: 0 0 16px 30px; /* links sind 30px platz zum INHALTs-DIV und unten 16px bis zum PDF-Download */
  list-style-image: url(preise/aufzaehl.gif); /* als Aufzählungszeichen wird diese Grafik gewählt */
  line-height: 18px; /* Zeilenabstand */
  }

/* Formmailer und Anreise */

div.tableform {
  display: table;
  width: 690px;
  }

div.trform {
  display: table-row;
  }

div.tdform {
  display: table-cell;
  border: none;
  padding: 8px 0 0 0;
  vertical-align: top;
  }

.border {	/* gestaltet die Eingabefelder des Formmailers */
  border: 1px solid #6688E3; /* Breite und Farbe der eingabefelder-ränder */
  padding: 1px 1px 1px 1px; /* der Abstand des Eingabetextes vom Rand der eingabefelder */
  margin: 0 4px 4px 0; /* rechts und unten haben die Eingabefelder 4px Abstand */
  }

#eingabehint1 {
  background:url(form/mann1.gif) no-repeat center #FFFFFF;
  }

#eingabehint2 {
  background:url(form/mann2.gif) no-repeat center #FFFFFF;
  }

#eingabehint3 {
  background:url(form/mann3.gif) no-repeat center #FFFFFF;
  }



/* NUR Anreise und sterne im footer */

img.anreise {
  vertical-align: bottom;
  }


/* Unterseiten von Freizeitangebote und preislistenfolgendeleistungenauflistung*/

div.tablefrei {
  display: table;
  width: 690px;
  }

div.trfrei {
  display: table-row;
  }

div.tdfrei-bild {
  display: table-cell;
  border: none;
  padding: 0 0 0 0;
  vertical-align: top;
  }

div.tdfrei-textl {
  display: table-cell;
  border: none;
  padding: 0 10px 0 0;
  vertical-align: top;
  }

div.tdfrei-textr {
  display: table-cell;
  border: none;
  padding: 0 0 0 10px;
  vertical-align: top;
  }


/* Bilder-Links */

img { /* sorgt dafür dass bilder auf denen ein link gesetzt ist sich nicht auf die schriftlinie setzten */
vertical-align: bottom;  /* somit entfällt der "fehlerhafte" abstand nach unten */
  }


/* Schnoerkel nach den H1-Ueberschriften */

img.schnoerkel {
  background-image:url(cssblau/schnoerkel.png);
  }