/* Basis Elemente */ 
/* Styles für Basiselemente: body, h1-h6, ul, ol, a, p, etc. */  

body{
	font-family: Arial, Helvetica, sans-serif;
  	font-size: 75.00%; /* Basis-Layout erhält Standardschriftgröße von 12 Pixeln */
	background: #f8efd7;
}

/* Basis-Größen der Überschriften festlegen */
h1,h2,h3,h4,h5,h6 { 
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
  color:#222;
  margin: 0 0 0.25em 0;
}

h1 { font-size: 250% }                        /* 30px */
h2 { font-size: 200% }                        /* 24px */
h3 { font-size: 150% }                        /* 18px */
h4 { font-size: 133.33% }                     /* 16px */   
h5 { font-size: 116.67% }                     /* 14px */
h6 { font-size: 116.67%; font-style:italic }  /* 14px */

p { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em; 
	line-height: 1.5em; 
	margin: 0 0 1em 0; 
}

a { color: #990033; }
a:hover { color: #f39800; }
  
/* Generic Klassen */  
/* Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently */  

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


.right { float: right; }
.left { float: left; }

img.right { margin: 0 0 5px 12px; }
img.left { margin: 0 12px 5px 0; }

.thumb { border: 1px solid #CCCCCC ; background: #faf7ed; padding: 5px;}

small { font-size: 80%; }
  
/* Basis Layout */  
/* Basis des Templates definieren: header, footer, etc. und Elemente die Helfen die Basiselemente zu gestalten */  

#page { width: 100%; }

#header { height: 130px; position: relative; }

#teaser-bg { clear: both; }

#teaser { 
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 40px 0 30px 0;
	position: relative;
	
}

#main {
	padding: 20px 0;
	}

#sidebar {
	float: right;
	width: 250px;
}

#content { 
	width: 500px; 
	float: left; 
	border-right: 1px solid #e7dec7; 
	padding: 10px 20px 10px 0
}

#footer-bg{	clear: both; padding: 0 0 50px 0;}
#footer { padding: 30px 0; position: relative;}

/* Hintergrundbilder für die verschieden Bereiche (komplette Seitenbreite)*/
#header-bg { background: #f6e8be url(../bilder/header-bg.png) repeat-x 0 0; text-align: center; }
#nav-bg { background: #362419 url(../bilder/nav-bg.png) repeat-x 0 0; text-align: center; height: 50px;}
#subnav-bg { background: #33251b url(../bilder/teaser-bg.png) repeat-x 0 0; text-align: center; }
#teaser-bg { background: #33251b url(../bilder/teaser-bg.png) repeat-x 0 0; text-align: center; }
#main-bg { background: #f8efd7 url(../bilder/main-bg.png) repeat-x 0 0; border-top: 7px solid #dbcc9b; text-align: center; }
#footer-bg { background: #372c24 url(../bilder/footer-bg.png) repeat-x 0 0; text-align: center; }

/* container mit den Inhalten werden mittig positioniert*/
#header, #teaser, #main, #footer, #navigation, #subnav {
	margin: 0 auto;
	text-align: left;
	width: 800px;
}

/* Header */  
/* Hier werden alle Elemente im Headerbereich definiert */


#header h1 {
/* Logo mit Image Replacement Technik(Phark-Methode) - Text wird duch Bild ersetzt */  
	background: url(../bilder/logo.png) no-repeat 0 0;
	text-indent: -999em;
	width: 160px;
	height: 120px;
	float: left;
}

span.homelink {
	position: absolute;
	width: 200px;
	height: 100px;
	display: block;
	text-indent: -9999px;
	top: 6px;
	left: 0px;
}

/* Navigation */  
/* Hier werden alle Elemente der navigation definiert */ 

#navigation {position: relative;}

#nav {
	margin: 0;
	padding: 0;
	height: 50px;
	list-style: none;
	display: inline;
	overflow: hidden;
	}

#nav li {
	margin: 0; 
	padding: 0;
    list-style: none;
	display: inline;
	}

#nav a {
	float: left;
	padding: 50px 10px 0 0;
	overflow: hidden;
	height: 0px !important; 

	}
	
#nav a:hover { background-position: 0 -100px; }
	
#tgastronomie a  { width: 140px;	background: url(../bilder/nav_restaurant.png) top left no-repeat; }
#thotel a  { width: 70px; background: url(../bilder/nav_hotel.png) top left no-repeat; }
#tumgebung a  { width: 110px; background: url(../bilder/nav_umgebung.png) top left no-repeat; }
#taktuelles a  { width: 110px;	background: url(../bilder/nav_aktuelles.png) top left no-repeat; }
#tkontakt a  { width: 95px;	background: url(../bilder/nav_kontakt.png) top left no-repeat; }
#tbuchung a  { width: 94px;	background: url(../bilder/nav_buchung.png) top left no-repeat; }

#gastronomie #nav #tgastronomie a, 
#hotel #nav #thotel a,
#umgebung #nav #tumgebung a, 
#aktuelles #nav #taktuelles a, 
#kontakt #nav #tkontakt a,
#buchung #nav #tbuchung a { background-position: 0 -50px; }


/*englische navi */
#egastronomie a  { width: 125px;	background: url(../bilder/nav_restaurant_en.png) top left no-repeat; }
#ehotel a  { width: 70px; background: url(../bilder/nav_hotel.png) top left no-repeat; }
#eumgebung a  { width: 130px; background: url(../bilder/nav_umgebung_en.png) top left no-repeat; }
#eaktuelles a  { width: 110px;	background: url(../bilder/nav_aktuelles.png) top left no-repeat; }
#ekontakt a  { width: 80px;	background: url(../bilder/nav_kontakt_en.png) top left no-repeat; }
#ebuchung a  { width: 94px;	background: url(../bilder/nav_buchung_en.png) top left no-repeat; }

#gastronomie #nav #egastronomie a, 
#hotel #nav #ehotel a,
#umgebung #nav #eumgebung a, 
#aktuelles #nav #eaktuelles a, 
#kontakt #nav #ekontakt a,
#buchung #nav #ebuchung a { background-position: 0 -50px; }

/* Subnavigation #subnav */

#subnav {
	width: 800px;
	position: relative;
	padding-top: 8px;
}

#subnav ul {
	width: 100%;
	float: left;
}

#subnav li {
	display: inline;
}

#subnav li a{
	padding: 10px 30px 15px 0px;
	display: block;
	color: #fff;
	float: left;
	letter-spacing: 0.07em;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #e0d5bf; 
}
#subnav li a:hover{
	color: #fff;
	text-decoration: underline;
}
/* Teaser */  
/* Hier werden alle Elemente im Teaserbereich definiert */ 

.teaser-left { width: 59%; }

.teaser-right {
	position: absolute;
	right: -13px;
	top: 17px;
	height: 231px;
	width: 40%;
}

#teaser h2 {
	color: #808c56;
	font-style: italic;
} 

#teaser p {
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: 0.04em;
	font-size: 1.3em;
	color: #e0d5bf;
}
   
/* Main - Content/Sidebar */  
/* Hier werden alle Elemente im Contentbereich definiert */ 

#main h2, #main h3{
/* Überschriften im Hauptbereich (#content und #sidebar) */ 
	color: #808c56;
	font-weight: bold;
	font-style: italic;
	letter-spacing: -1px;
	margin: 0 0 10px 0;
}

#main h2{
/* Überschriften im Hauptbereich (#content und #sidebar) */ 
	margin: 0 0 25px 0;
}

#main h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #372c24;
	font-weight: bold;
	font-style: normal;
	letter-spacing: -1px;
	margin: 15px 0 2px 0;
}

#main .eintrag {
	padding: 0 0 10px 0;
	margin: 0 0 15px 0;
	border-bottom: 1px solid #e7dec7;	
}

#main p{ color: #4e3c30; }

/* Speisenkarte Styles */
#speisen {
  	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: left;
	color: #4e3c30;
}

#speisen h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 1.7em;
	margin: 1.5em 0 1em 0;
	color: #bfb7a3;
	letter-spacing: 0.08em;
}

#speisen dl { 
	width: 100%;
	padding: 5px 0;
	overflow: auto;
 	background: url(../bilder/dot.gif) repeat-x 0 1.3em;
}

#speisen dt, #speisen dd.preis { font-size: 1.2em; font-weight: bold; background: #f8efd7;}
#speisen dt { float: left; font: Arial, Helvetica, sans-serif; padding-right: 5px; }
#speisen dd { margin: 0;}
#speisen dd.preis { float: right; padding-left: 5px; line-height: 100%; padding-bottom: 5px;}
#speisen dd.inhalte { float:left; width:100%; padding: 2px 0; font: italic 1.2em Georgia,Times,sans-serif; color:#555; }
/* ENDE Speisenkarte Styles */

/* Sidebar */  
/* Hier werden alle Elemente in der Siedbar definiert */ 

#sidebar a {
	background: url(../bilder/link-pfeil.gif) no-repeat right 5px;
	padding-right: 10px; 
}

#sidebar a:hover {
	background: url(../bilder/link-pfeil.gif) no-repeat right -8px;
	padding-right: 10px; 
}

.sidebar-block {
	margin-bottom: 30px;
}

ul#sidebarnav {
	margin: 0 0 20px 0;
	
}
ul#sidebarnav li{
	margin: 0 0 3px 0;
	
}

ul#sidebarnav a{
	width: 225px;
	padding: 8px;	
	display: block;
	background: #e0dac8;
	color: #817c6e;
	font-weight: bold;
	text-decoration: none;
}
ul#sidebarnav a:hover{
	width: 225px;
	background: #ded5bb;
}

ul#sidebarnav a.on { background: #ccd5ac; }




/* Newsbox auf der Startseite */
.newsbox {
	margin:10px 0 30px 0;
}

.newsbox .textbox {
	font-size: 0.95em;
	letter-spacing: 0.04em;
	color: #4e3c30;

}

.newsbox .datum {
	color: #B7AD92;
	font-size: 12px;
	margin: 0 0 8px 0;
}
 .newsbox h4 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 90%;
	font-weight: bold;
	font-size: 13px;
	letter-spacing: normal;
	margin: 0 0 8px 0;
}

 .newsbox h4 a{
	color:#4E3C30;
	text-decoration: none;

}

#newsarchiv { margin-top: 20px; }

#newsarchiv h3 { 
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 1em;
	letter-spacing: 0.06em;
	color: #B7AD92;
	padding: 8px 0 3px 0;
	border-bottom: 1px solid;
	text-align: left;
	font-weight: normal;
}
#newsarchiv h4 { 
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 1.4em;
	color: #5b503a;
	padding: 8px 0;
}

#newsarchiv .textbox { 
	font-size: 1em;
	letter-spacing: 0.02em;
	line-height: 130%;
	color: #000;
}
   
/* Footer */  
/* Hier werden alle Elemente im Footerbereich definiert */ 
 
#footer a { color: #fff; }
#footer p { color: #e0d5bf; }

.footer-box {
	width: 280px;
	float: left;
	margin-right: 20px;
}

.banner {
	float: right;
	display: inline;
}

.banner-head {float: right; padding-top: 10px;
}

ul#footer-nav { float: left; display: inline;}
#footer-nav li {  }
#footer-nav li a { 
	padding-left: 30px; 
	font-weight: bold;
	font-size: 1.1em;
	line-height: 2.3em;
	text-decoration: none;
}
#footer-nav li a:hover { text-decoration: underline; }

/* Sonstiges */  
/* Hier werden alle Sonstigen Elemente definiert */

#sprache {
	position: absolute;
	right: 0px;
	margin-top:10px;
	}
	
	#iframe {
	width: 500px;
	height:540px;
	}
	

/* ---------- gallery styles start here ----------------------- */
.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gallery li {
	margin: 15px;
	padding: 0;
	float: left;
	position: relative;
	width: 212px;
	height: 175px;
}

.gallery a {
	text-decoration: none;
	color: #666;
}
.gallery a:hover {
	color: #000;
	text-decoration: underline;
}
.gallery img {
	padding: 20px 0 0 21px;
}
.gallery em {
	width: 225px;
	height: 38px;
	display: block;
	position: absolute;
	text-align: center;
	font: 100%/100% Georgia, "Times New Roman", Times, serif;
	padding-top: 155px;
	background-image: url(../bilder/picture-frame.png);
	background-repeat: no-repeat;
}

#twitter {margin-left:810px; width:76px; height:76px;}