/*
CLASS kann mehrere Elemente auszeichnen. Definition via .
ID zeichnet "nur" ein Element aus, es dient also zur eindeutigen Bestimmung. Definition via #
Bei Angabe beider besitzt ID höhere Prio als CLASS.

Box:
content mit width + height
padding = Innenabstand zwischen content und border
border
margin = Außenabstand zwischen border und nächstem Element
margin-right:auto = gesamte noch zur Verfügung stehende Breite, wirkt sich ohne Angabe margin-left nicht aus.
margin-left:auto; margin-right:auto zentriert Block-Elemente
margin
	Eine Angabe: alle vier Ränder des Elements erhalten den gleichen Außenabstand.
	Zwei Angaben: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
	Drei Angaben: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
	Vier Angaben: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

versteckt {visibility:hidden;}
CSS-direkt im tag style="position: relative; top: 12px; left: 22px;"

FARBEN/Colors
#00574B = dunkelgrünes Landhaus-Logos
#FFFCD8 = beige-gelber Hintergrund
#ECE5B6 = goldene Trennlinie
##990000 = dunkelrote Linkfarbe
*/
/*
div {
border: solid 1px red;
}
*/
/* ALLE div visualierien, zwecky Layout-Test */

a:active {color: orange}
a:link {color: #990000}
a:visited {color: #00574B}
a img {border:0;}

h1 {
font-size:130%;
text-align:center;
font-style: normal;
font-weight:normal;
}
h2 {
font-size:100%;
text-align:center;
font-style: normal;
font-weight:normal;
}

h3 {
font-size:100%;
text-align:center;
font-style: normal;
font-weight:normal;
} /* Anzeige wie h2, dient nur der logischen Abgrenzung */

h4 {
margin:0;
padding:0;
font-size:110%;
text-align:center;
font-style: normal;
font-weight:normal;
font-family: Garamond, serif; color:white;
} /* für Pensionsname, als Header da relevant */
.kontaktdaten {
margin:0;
padding:0;
font-size:110%;
line-height:1.3em;
text-align:center;
font-style: normal;
font-weight:normal;
font-family: Garamond, serif; color:white;
}

p, ul, td, div {
font-size:95%;
  line-height:1.3em;
}

li
  {
  margin: 0;
  padding: 0;
  ;
  }
ul
  {
  margin-left: 0;
  padding-left: 1em;
  }
/*
	padding:1em;
*/
body {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: black;
	background-color: #00574B;
	margin:0;
	padding:0;
border:0;
height:100%;
max-height:100%;
	scrollbar-3dlight-color: black;
	scrollbar-arrow-color: black;
	scrollbar-base-color: #FFFCD8;
	scrollbar-dark-shadow-color: #FFFF55;
	scrollbar-face-color: #FFFCD8;
	scrollbar-highlight-color: white;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-track-color: #FFDD77;
}
#menu_layer {
	position:fixed; top:5px; left:25px; right:25px;
	min-width:1000px;
	padding:0;
	height:138px;
	z-index:5;
	overflow:hidden;
	font-size:0.8em;
	background: #FFFCD8;
	border-bottom:1px solid #FFCC00;
	box-shadow: 7px 7px 10px black;
font-family: Garamond, serif;
} /* horizontaler Schatten, da sonst Spalt zwischen menue und content */
/*
menu_layer gesamt 138+1+5=144px
position:absolute; wenn Browserprobleme mit IE, denn: - since the body size is set to 100% high (by 100% wide) this will have the same effect as position:fixed; but using position:absolute allows Internet Explorer to interpret it correctly.
box-shardow
    1. X-Achse vertikal positiv=Schatten rechts, negativ=Schatten links
    2. Y-Achse horizontal positiv=Schatten unterhalb, negativ=Schatten oberhalb
    3. blur 0 =scharfgezeichnter Schatten, je hoeher umso weicher
    Color

*/

/* content = Inhaltsbereich zwischen menu und footer */
#content_layer {
	position:fixed; top:144px; left:25px; right:25px; bottom:65px;
	min-width:1000px;
	padding: 2px;
	z-index: 6;
	overflow:auto;
	background: #FFFCD8;
	box-shadow: 7px 7px 10px black;
}
* html #content_layer {
  height:100%;
  width:100%;
  }
/* hack for Internet Explorer only */

/*
margin-left: auto; margin-right: auto; 	width: 95%;
*/

#footer_layer {
	position:fixed;
	bottom:5px; left:25px; right:25px;
	height:40px;
	overflow:hidden;
	margin:0;
	padding: 10px 0 0 0;
text-align:center;
font-family: Garamond, serif; color:white;
}

#footer_layer a {
	color:#FFCC00;

  }

cite { font-family: "Courier New", Courier, serif; font-size: 80%; font-style: italic; color: gray}
dfn { font-family: "Courier New", Courier, serif; font-size: 80%; font-style: normal; color: gray}

/* aktuelle Hinweise */
p.aktuell {
padding: 0.5em 0.5em;
border: 1px solid green;
background: #fffaf0;
border-collapse: collapse;
text-align: left;
width: 60%;
margin-left: auto; margin-right: auto;
} /* margin-left + right auto zentriert Tabelle */
/* aktuelle Hinweise */
p.angebot {
padding: 0.5em 0.5em;
border: 1px solid red;
background: white;
border-collapse: collapse;
text-align: left;
width: 60%;
margin-left: auto; margin-right: auto;
} /* margin-left + right auto zentriert Tabelle */
/* Preistabelle */

#preis_layer {
position:relative; top:0;
}
/* -16px
float:right;
*/
#zimmer_back {
position:absolute; bottom: 5px; right: 10px;
}


table.preis {
border: 2px solid green;
border-collapse: collapse;
width: 300px;
margin-left: auto; margin-right: auto;
font-size: 80%;
} /* margin-left + right auto zentriert Tabelle */
table.preis th {
border-bottom: 2px solid green;
    padding: 0.2em 0.3em;
    background-color: white;
    text-align: left;
    font-weight: bold;
}
table.preis td.footer {
    background: #bdb76b;
    text-align: center;
}
table.preis td {
border-bottom: 1px solid black;
text-align: left;
background:#fff8dc;
}
table.preis td.euro {
    text-align: center;
} /* gesonderte Formatierung für Spalte mit Preisangabe */

.hideview {display:none;}

#menu_logo {
float:left;
  }
#menu {
float:left;
  margin:27px 0px;
  padding:0;
  height:84px;
  overflow:hidden;
  background:#00574B ;
  } /* #00574B */
#menu li {
  display:inline;
  list-style-type:none;
  } /* kein Umbruch, kein Aufzählungszeichen */
#menu li a {
  display:inline;
  float:left;
  text-decoration:none;
  margin:0px 0px;
  }
#menu li a span {
  display:none;
  }
#menu li a:hover span {
  position:relative;
  width:100px;
  display:block;
  cursor:pointer;
  float:left;
  } /* width: Breite des aufklappenden Textbereichs */
#menu li a:hover {
  background-color: #00574B;
  } /* #00574B */
#menu li a img {
  opacity:1;
  margin:2px 0 2px 2px;
  border:0;
  float:left;
  }
#menu li a:hover img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity:0.5;
  }
#menu .short {
	position:relative;
	top:5px;
	left:-80px;
  padding:0;
  color:#ffcc00;
  font-variant:small-caps;
font-weight: bold;
  font-size:1.5em;
  } /*
#ffcc00 #FDD017
*/
#menu .long {
	position:relative;
	top:-10px;
  margin:2px 4px;
  padding:0;
font-weight: normal;
  font-size:1.3em;
  color:#fffaf0;
  }

.info {
table-layout:fixed;
margin-left: auto; margin-right: auto; margin-bottom: 40px;
padding: 10px;
background-color: #ECE5B6;
}
.info ul {
  list-style-image: url(images/stern_neu.gif);
  }

.info li {
  line-height:1.2em;
  text-indent: 0em;
  margin-top: 0px;
  margin-bottom: 5px;
  }

#pic_layer_left1 {
	float:left;
	margin: 0;
	padding: 0;
	z-index: 7;
}

#pic_layer_left2 {
	float:left;
	margin: 0;
	padding: 0;
	z-index: 7;
} /* breite Variante = position:relative; top: top: -16px */

#pic_layer_leftbar {
	clear:both;
	height: 1px;
	margin: 0; padding: 0;
	z-index: 8;
} /* breite Variante = background:#00574B; height:16px; position:relative; top: -8px;  opacity: 0.5;  opacity funktioniert nicht bei IE */

#pic_layer_left1 img { margin: 0 1px 0 0; } /* nur für rechten Rand, Rand unten via pic_layer_leftbar */
#pic_layer_left2 img { margin: 0 1px 0 0; }

#pic_layer_right1 img { margin: 0 0 0 1px ; }
#pic_layer_right2 img { margin: 0 0 0 1px ; }

#pic_layer_right1 {
	float:right;
	margin: 0 0 0 10px;
	padding: 0;
	z-index: 7;
}

#pic_layer_right2 {
	float:right;
	margin: 0 0 0 10px;
	padding: 0;
	z-index: 7;
}

#pic_layer_rightbar {
	clear:both;
	height: 1px;
	margin: 0; padding: 0;
	z-index: 8;
/*	breite Variante = background:#00574B; opacity: 0.5; height:16px; position:relative; top: -8px; right: 5px; */
}

.clearfloat
{
	clear:both;
}

.w460 {
width:462px; height:200px;
}