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


body  {
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
  font-size: 14px;
  background: url(cssgrau/bodyhint.png) repeat-x fixed #ADADAD;  /*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: 830px; /* 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;
  }

img.cssbutton {       /* betr. die Styleswitchbuttons */
  padding: 2px 0 0 1px; /* jeder Styleswitchbutton hat 2px nach oben und 0px nach rechts und 0px nach unten und 1px nach links Platz */
  vertical-align: top; 
  }

/* rahmen ist der UMRANDETE grossbereich */
#rahmen { 
  width: 830px;
  background-color: #EAEAEA;
  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 */
#header { 
  height: 120px;
  background-image: url(cssgrau/headerhint.png);
  } 

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

#flaggen {
  float: right;
  width: 30px; /* Die Breite dieser ID muss mit der Breite der Sprachenflagge identisch sein */
  height: 18px; /* Die Länge dieser ID muss mit der Länge der Sprachenflagge identisch sein */
  margin: 60px 33px 0 0;
  }

/* in MENU ist das MENÜ */
#menu {
  height: 35px;              /*  diese px + die padding-px ergeben die geamthöhe des MENU-DIV */
  background-color: #ffff99;
  padding: 0 0 0 0;        /* in den ersten 7 pixel von oben ist im MENU-DIV kein inhalt vorhanden */
  }


/* der eigentliche INHALT */
#inhalt { 
  margin: 50px 105px 16px 105px; /* etwas space von allen seiten */
  } 


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


/* im kontaktbereich gibt es fuer unsere emailadresse spezielle spamschutzregeln */
#kontaktemail::after, span#mailanzeigen::after {
background-color:#C0C0C0; color:#000000;}
span#mailanzeigen::after {content: "mail\40stefangundling.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 #ffffff; /* 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 { /* OK */
  width: 12px;
  }

.kurz { /* OK */
  min-width: 71px;
  }
  
.mittelkurz { /* OK */
  min-width: 93px;
  }

.mittel { /* OK */
  min-width: 109px;
  }

.lang { /* OK */
  min-width: 148px;
  }
  
.sehrlang { /* OK */
  min-width: 180px;
  }

.aussenrechts { /* OK */
  width: 11px;
  }

#sel { /* OK */
  color: #ffffff; /* Textfarbe des aktuellen Menüpunktes */
  background: #ffffff; /*Hintergrund des aktuellen Menüpunktes */
  background: url(cssgrau/menuhinthover.gif) repeat-x #EEF9F1; /*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(cssgrau/menuhint.gif) repeat-x #EEF9F1; /*Hintergrundbild der nicht aktuellen Menüpunkte, falls bild nicht vorhanden dann hintergrundfarbe */
  }
  
#menu a:hover { /* OK */
  background: url(cssgrau/menuhinthover.gif) repeat-x #EEF9F1; /*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: #000000;
  font-size: 20px;
  font-weight: normal;
  padding: 0 0 2px 0;
  }

h2 {
  color: #000000;
  font-size: 17px;
  font-weight: normal;
  padding: 28px 0 12px 0;
  }

.fehlerimformmailer { /* das sind die fehlermeldungen im formmailer */
  color: #FF0000;
  font-size: 14px;
  font-weight: bold;
  }

.bestformmailer { /* das ist die bestaetigungsmeldungueberschrift im formmailer nach erfolgreichem versand */
  color: #008000;
  font-size: 14px;
  font-weight: bold;
  }

/* Links */

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

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

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


/* Home */

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

div.trhome {
  display: table-row;
  }

div.tdhome {
  display: table-cell;
  border: none;
  padding: 14px 0 0 0;
  vertical-align: middle;
  }

/* Zimmer - Haus - Freizeitangebote-Startseite */

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

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(cssgrau/cellback.png) repeat-x #A0E0B4; /* Hintergrundbild von "Cellback-Zellen", falls bild nicht vorhanden dann hint.farbe */
  }

img.bigpic {
  border: 6px solid #4D4D4D; /* Um die großen Zimmer- und Hausbilder soll ein Rahmen sein (gilt auch für das große Home-Bild) */
  }


/* Preise */

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

div.trpreis {
  display: table-row;
  }

#einzelpreistdback {
  background-color: #E0E0E0;
  }

#doppelpreistdback {
  background-color: #D8D8D8;
  }

#dreibettpreistdback {
  background-color: #D2D2D2;
  }

div.tdmann {					/* Die Tabellenspalte wo der Mann zu sehen ist */
  text-align: center;			/* Die Mann-Figur(en) sollen in der Zelle horizontal-zentriert dargestellt werden */
  display: table-cell;
  border: none;
  vertical-align: middle;		/* Die Mann-Figur(en) sollen in der Zelle vertical-zentriert dargestellt werden */
  width: 55px; /* Breite der dieser Spalte" */
  line-height: 18px;
  height: 90px; /* Höhe dieser Zelle */
  }

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

div.tdvorwort {
  display: table-cell;
  border: none;
  vertical-align: middle;
  width: 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: 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: 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 */
  }


/* ENG-Mail */

div.tablemail {
background-color: #EEF9F1;
  display: table;
  width: 470px;
  height: 470px;
  padding: 0 0 0 0;
  vertical-align: middle;
  margin: 15px 0 0 10px;
  }

div.trmail {
  display: table-row;
  }

div.tdmail {
  display: table-cell;
  border: none;
  padding: 0 0 0 14px;
  vertical-align: middle;
  }


/* Formmailer und Anreise */

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

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 #4D4D4D; /* 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 */

img.anreise {
  vertical-align: bottom;
  }


/* Unterseiten von Freizeitangebote */

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

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(cssgrau/schnoerkel.png);
  }